使用 jquery $(this) 识别选择下拉文本

Question

我在页面上有几个选择元素，例如

<select class="dd" id="dropdown1">
    <option value="123">Option A</option>
    <option value="234">Option B</option>
</select>
<select class="dd" id="dropdown2">
    <option value="456">Option C</option>
</select>

等，

我想使用 jquery 的 $(this) 来识别已选择的几个下拉列表中的哪一个并返回它们的文本值。

我可以使用类似的方法：

$("#dropdown1 :selected").text() 

返回指定的条目，但是当我尝试将 $(this) 添加到混合中时它不起作用。 我哪里出错了？

Answer 1

您可能想使用 .val() 函数，它将给出您在下拉列表中当前选定的项目值：

var selectedValue = $('#dropdown1').val();

并获取文本而不是值：

var selectedText = $('#dropdown1 option:selected').text();

$(this) 更常用于事件处理程序的上下文中，例如 点击，更改等...

Answer 2

由于您对它们都使用相同的类，因此您可以使用：

$(".dd").change(function(){
  alert($('option:selected', $(this)).text());
});

要获取所选值的 value 选项，您可以使用 val() 方法。

请注意，您还可以使用 starts with ^ 选择器，如下所示：

$("select[id^='dropdown']").change(function(){
  alert($('option:selected', $(this)).text());
});

更多信息：

• http://api.jquery.com/val/
• http://api.jquery.com/attribute-starts-with-selector/