Question

我正在使用bootstrap下拉菜单

＆＃13;

$(".dropdown-menu li a").on('click',function(){
    var selText = $(this).text();
    $(this).parents('.dropdown').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
    $(".default_option").remove();
    $(".dropdown-menu").prepend("<li class='default_option'><a>Kies behandeling</a></li>");
});

＆＃13;

#treatment-modal .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
#treatment-modal .dropdown-menu>li>a {
    display: inline-block;
    padding: 12px;
    clear: both;
    font-weight: 400;
    line-height: 1;
    color: #333;
    white-space: nowrap;
    width: 100%;
    cursor: pointer;
}
#treatment-modal .dropdown-menu li {
    margin: 0;
    padding: 0;
    line-height: 0;
}
#treatment-modal button.btn.btn-default.dropdown-toggle {
    margin: 5px 0 0;
    text-align: left;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="treatment-modal">
   <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Kies behandeling<span class="caret"></span></button>
      <ul class="dropdown-menu treatment-select">
         <li>
            <a value="37"><span class="pull-left">hair wash and treatment (60min)</span><span class="pull-right">€30.00</span></a>
         </li>
      </ul>
   </div>
</div>

＆＃13;

当我尝试选择选项时，它正常工作并显示我作为下拉文本的替换常规选择下拉

但是当我尝试在下拉列表中添加一些值时，我点击那个前置值时默认选择不起作用。

寻求帮助。

Answer 1

默认元素会动态添加到菜单中，因此您需要编辑.on（）函数，以便正确绑定新元素。

$(document).on('click', ".dropdown-menu li a", function() {
    var selText = $(this).text();
    $(this).parents('.dropdown').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
    $(".default_option").remove();
    $(".dropdown-menu").prepend("<li class='default_option'><a>Kies behandeling</a></li>");
});

check fiddle here

bootstrap dropdown选择默认值不起作用

1 个答案: