javascript - 如何确定在下拉列表中选择了哪个选项？

Question

我有一个值的下拉菜单:

            <select class="notifications-dropdown">
                <option value="val1">Val4</option>
                <option value="val2">Val3</option>
                <option value="val3">Val2</option>
                <option value="val4">Val1</option>
            </select>

我想做到这一点，以便当用户从下拉列表中选择其中一个选项时，该选项有一个 ' selected ' 属性已打开。例如，如果用户单击下拉菜单并选择 Val3，则 DOM 应更改如下:

            <select class="notifications-dropdown">
                <option value="val1">Val4</option>
                <option value="val2" selected>Val3</option>
                <option value="val3">Val2</option>
                <option value="val4">Val1</option>
            </select>

我不确定要监听什么 jQuery 事件才能知道用户何时选择一个选项。我试着听 change事件于 .notifications-dropdown但生成的事件对象没有给我任何有关选择哪个选项的指示。如何确定在下拉列表中选择了哪个选项？

Answer 1

只需使用 .val()在您的选择列表中。

$('.notifications-dropdown').change(function() {
    alert($(this).val());
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="notifications-dropdown">
    <option value="val1">Val4</option>
    <option value="val2">Val3</option>
    <option value="val3">Val2</option>
    <option value="val4">Val1</option>
</select>

this 在 jQuery 回调内部使用时是发生事件的元素。