使用jQuery获取下拉菜单中当前选择的值

Question

我在页面上有一组动态生成的下拉选项框，基本上我使用 jQuery 来克隆它们。现在我想在每个下拉选项框发生变化时捕获所选择的值。

我尝试了以下代码，但它并没有起作用：

$('._someDropDown').live('change', function(e) {
            //debugger;
            var v = $(this);
            alert($(this + ':selected').val());
            alert($(this).val());
        });

如何完成这个任务？

- Amit

---

$(this).val() 应该有效。你从第二个提示框中得到了什么？ - David Tang

抱歉，各位..这是我的错误，我没有设置选项的值....！$(this).val()很好用。 - Amit

Answer 1

获取所选选项的文本

$("#your_select :selected").text();

获取所选选项的值。

$("#your_select").val();

- Robin Rizvi

---

完美答案 - 选定值与选定显示文本之间的比较。谢谢！ - barrypicker

注意 - IE8不支持:selected伪类选择器，因此在该浏览器中可能会得到空值。如果您需要支持IE8，则可能需要类似以下的内容：jQuery(jQuery('#selme option')[jQuery('#selme')[0].selectedIndex]).text() - JD Smith

Answer 2

这就是你需要的 :)

$('._someDropDown').live('change', function(e) {
    console.log(e.target.options[e.target.selectedIndex].text);
});

对于新的 jQuery，使用 on

$(document).on('change', '._someDropDown', function(e) {
    console.log(this.options[e.target.selectedIndex].text);
});

- Olical

---

@Amit 这是纯 JavaScript 代码，可能有一些 jQuery 的方法可以实现，但我认为这种方法会稍微快一些，如果需要调试的话你也可以看得懂。 - Olical

非常感谢，这是我问题的解决方案 ;) - davidselo

@Olical 您的代码在IE 8中也可以正常工作。谢谢 :) +1 - Shubh

需要这个来进行不同的实现，但完美地工作。我想肯定有一种引用事件的方法，但不确定如何操作。 - Leeish

Answer 3

$("#citiesList").change(function() {
    alert($("#citiesList option:selected").text());
    alert($("#citiesList option:selected").val());              
});

citiesList是选择标签的id。

- Dharmesh

---

这是最好的答案。最简单和简单的。 - Ronnie Royston

这是对我在Chrome上有效的答案。谢谢。 - Donal Fellows

Answer 4

查看它-->

获取文本

（注：该段文字已经是中文，无需翻译。）

$("#selme").change(function(){
 $(this[this.selectedIndex]).text();
});

获取数值

$("#selme").change(function(){
 $(this[this.selectedIndex]).val();
});

- Sukhjeevan

Answer 5

您可以尝试以下方法：

$("._someDropDown").val();

- alexl

---

这将获取第一个下拉菜单的值，而不是刚刚更改的那个。 - David Tang

Answer 6

要获取下拉菜单（select）元素的值，只需使用val()。

$('._someDropDown').live('change', function(e) {
  alert($(this).val());
});

如果你想获取所选选项的文本，可以使用以下代码：

$('._someDropDown').live('change', function(e) {
  alert($('[value=' + $(this).val() + ']', this).text());
});

- Xhalent

Answer 7

试试这个...

$("#yourdropdownid option:selected").val();

- Vivek

Answer 8

如果您想使用 this 或另一个变量来访问所选内容，我认为这种方法更有效率且可读性更好。

$('#select').find('option:selected')

事实上，如果我没记错的话，phpStorm会尝试自动修正其他方法。

- Mazzy

Answer 9

如果您想要当前选择值的索引。

$selIndex = $("select#myselectid").prop('selectedIndex'));

- Olivier.h

Answer 10

上述讨论的选项行不通，因为它们不是 CSS 规范的一部分（这是 jQuery 的扩展）。经过两三天的搜索，我发现从下拉菜单中选择文本的唯一方法是：

{ $("select", id:"Some_ID").find("option[selected='selected']")}

参见下面的附加说明： 因为:selected是jQuery扩展而不是CSS规范的一部分，使用:selected进行查询不能利用本地DOM querySelectorAll()方法提供的性能提升。当使用:selected选择元素时，为了获得最佳性能，请先使用纯CSS选择器选择元素，然后使用.filter(":selected")。（摘自：http://api.jquery.com/selected-selector/）

- vijay pujar

---

这将返回默认选择的内容，而不是当前更改后的内容。 - Fanky