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

＆＃13;

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

＆＃13;

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

＆＃13;

在jQuery回调中使用时，

this是事件发生的元素。

Answer 2

你走在正确的轨道上：

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

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

阅读选择选项值

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

设置选择选项值

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

阅读所选文字

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

Answer 4

使用.val()方法

获取匹配元素集中第一个元素的当前值或设置每个匹配元素的值。


.val()方法主要用于获取表单元素的值，例如input，select和textarea。

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

Answer 5

您似乎与change事件走在了正确的轨道上。但事实上，change事件只是告诉您所选的字段/选项已更改，它和任何其他事件侦听器都不会提供值。

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

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

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

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

如何确定下拉菜单中选择的选项？

5 个答案: