Question

我有一个典型的Bootstrap Dropdown，如下所示：

<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 () {

摘录：

＆＃13;

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'));
});

＆＃13;

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

＆＃13;

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

如何为Bootstrap Dropdown设置显示和数据值？

2 个答案: