引導下拉列表中選擇默認值，不能正常工作

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

引導下拉列表中選擇默認值，不能正常工作

回答

相關問題