引导下拉列表中选择默认值，不能正常工作

IM引导下拉列表中选择默认值，不能正常工作

$(".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>"); 
 
});

#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; 
 
}

<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>

当我尝试以选择选项可以正常工作，并显示我作为替代下拉列表的文本喜欢传统选择下降

但当我尝试预先计算一些价值我ñ下拉比我点击那个时候prepended值默认选择不工作。

寻找帮助。

来源

2017-06-20 Nirav Joshi

将默认元素动态添加到菜单中，因此您需要编辑.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

来源

2017-06-20 08:51:52

引导下拉列表中选择默认值，不能正常工作

回答

相关问题