如何爲Bootstrap Dropdown設置顯示值和數據值？

Question

我有一個典型的自舉下拉這樣的：

<div class="btn-group"> 
    <button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default option<span class="caret"></span></button> 
    <ul id="mySelect" class="dropdown-menu"> 
      <li data-value="10" role="presentation"><a href="#">Option 1</a></li> 
      <li data-value="20" role="presentation"><a href="#">Option 2</a></li> 
    </ul> 
</div> 

我上設置顯示和數據值嘗試以下操作：

var mySelect= $('#mySelect'); 
mySelect.on('click', 'li', function() { 
    updateManufacturerIdSelect($(this).data('value')); 
}); 

$(".dropdown-menu li a").click(function() { 
    var selText = $(this).text(); 
    $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>'); 
}); 

雖然顯示值改變，我無法改變data-value爲on('click', 'li')事件不會觸發。最好我想在同一類型的事件上做兩件事。但由於缺乏經驗，我無法想到更好的實施。

Answer 1

這條線：

$(this).parents('.btn-group').find('.dropdown-toggle') 

必須得到改變：

$(this).closest('.btn-group').find('.btn') 

而且你可以使用這個事件兩個：

$(".dropdown-menu li a").click(function() { 

的片段：

function updateManufacturerIdSelect(val) { 
 
    console.log('updateManufacturerIdSelect: ' + val); 
 
} 
 

 
$(".dropdown-menu li a").click(function() { 
 
    var selText = $(this).text(); 
 
    $(this).closest('.btn-group').find('.btn').html(selText + ' <span class="caret"></span>'); 
 
    updateManufacturerIdSelect($(this).closest('li').data('value')); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 

 

 
<div class="btn-group"> 
 
    <button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default option<span class="caret"></span></button> 
 
    <ul id="mySelect" class="dropdown-menu"> 
 
     <li data-value="10" role="presentation"><a href="#">Option 1</a></li> 
 
     <li data-value="20" role="presentation"><a href="#">Option 2</a></li> 
 
    </ul> 
 
</div>

Answer 2

如果你想ul數據值屬性設置爲所選項目的值相同，你可以試試這個

$(".dropdown-menu li a").click(function() { 
    var selText = $(this).text(); 
    $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>'); 
    $(this).parents('.btn-group').find('.dropdown-menu').attr('data-value', $(this).parent().attr('data-value')) 
}); 

Working Demo