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

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 事件才能知道用户何时选择了一个选项。我尝试在 .notifications-dropdown 上监听 change 事件，但生成的事件对象没有给我任何关于选择了哪个选项的指示。如何确定在下拉菜单中选择了哪个选项？

Answer 1

你走在正确的轨道上：

// on Dom-ready
$(function() {
    // bind the 'change' event
    $('.notifications-dropdown').change(function() {
        // $(this).val() will have the selected value
        alert($(this).val());
    }).change(); // fire it once on page-load if you need to do anything based on the current value
});

用户选择新选项的操作将修改 DOM 元素的 selected 属性——您不需要以编程方式执行此操作。

Answer 2

只需在 select 列表中使用 .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 回调内部使用时是事件发生的元素。

Answer 3

在 jquery 更改事件中使用以下代码。假设，select 标签有 id="selectId"

读取Select 选项值

$('#selectId').val();

设置Select选项值

$('#selectId').val('newValue');

阅读 Selected 文本

$('#selectId>option:selected').text();

Answer 4

使用.val()方法

Get the current value of the first element in the set of matched elements or set the value of every matched element.

The .val() method is primarily used to get the values of form elements such as input, select and textarea.

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

Answer 5

您似乎在 change 事件的正确轨道上。但就是这样，change 事件只是告诉您所选的 field/option 已更改，它和任何其他事件侦听器都不会提供值。

要获取该值，您需要像这样引用 jQuery：

$('.notifications-dropdown option:selected').text();

或者要获取所选选项的值，您可以像这样引用它：

$('.notifications-dropdown option:selected').val();

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

How can I determine what option is selected on a dropdown?

html

javascript

jquery

drop-down-menu