Question

我有这个下拉列表：

<div class="m-b-lg" id="change_booking_status">
    <div class="btn-group btn-block">
        <button type="button" class="btn btn-default btn-block dropdown-toggle text-left" data-toggle="dropdown">Status <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a data-value="Confirmed"> Confirmed </a></li>
            <li class="divider"></li>
            <li><a data-value="NotConfirmed"> NotConfirmed </a></li>
        </ul>
    </div>
</div>

对于此下拉菜单的每次更改，我需要获取data-value中除class="divider"以外的值。

所以我这样说：

$('#change_booking_status').on('click', 'div > ul > li', function() {
    alert($(this).data('value'));
});

但我不行。

你能帮我吗？

感谢。

Answer 1

如果您可以从以下位置更改选择器：

'div > ul > li'

为：

'div > ul > li a'

一切正常。

相反，如果您无法更改，则必须找到元素锚并获取相应的数据值：

＆＃13;

$('#change_booking_status').on('click', 'div > ul > li', function() {
  console.log('First way: ' + $(this).find('a').data('value'));
});

$('#change_booking_status').on('click', 'div > ul > li a', function() {
  console.log('Second way: ' + $(this).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="m-b-lg" id="change_booking_status">
    <div class="btn-group btn-block">
        <button type="button" class="btn btn-default btn-block dropdown-toggle text-left" data-toggle="dropdown">Status <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a data-value="Confirmed"> Confirmed </a></li>
            <li class="divider"></li>
            <li><a data-value="NotConfirmed"> NotConfirmed </a></li>
        </ul>
    </div>
</div>

＆＃13;

使用jQuery获取下拉列表更改的价值

1 个答案: