使用jQuery获取和设置HTML select元素的选定选项值

Question

我正在尝试使用 jQuery 获取并设置下拉列表（select 元素）的选中值。

对于获取选中值，我已经尝试了 $("#myId").find(':selected').val() 和 $("#myId").val() 但两者都返回 undefined。

如果您有任何见解或建议，将不胜感激。

- ErnieStings

---

如果您正在使用ASP .NET，它们的ID在呈现后可能不同！ - Rigobert Song

Answer 1

要获取/设置select元素的实际selectedIndex属性，请使用：

$("#select-id").prop("selectedIndex");

$("#select-id").prop("selectedIndex",1);

- pmko

---

需要注意的是，prop() 功能是在 1.6 版本中实现的，因此之前的版本没有这个功能。 - Robert

我喜欢这个答案，因为它实际上回答了如何访问索引的问题，而不仅仅是值。 - Pablo D.

是的，我认为那是最初的问题。 - Jack Holt

你可能也可以使用相同语法的attr并且没问题。 - Yitzhak

.attr() 和 .prop() 不是同义词。在某些情况下，它们可以起到相同的作用，例如 .attr('id') 等效于 .prop('id')。但是，在这个例子中，.prop('selectedIndex') 等效于 .get(0).selectedIndex。 - WynandB

由于某些原因，这似乎没有触发“change”事件？ - Domi

Answer 2

目前你所写的方式是正确的。要么选择器的id不正确，要么在文档对象模型上存在一些问题。

检查元素的id以及验证你的标记语言在W3C的这里是否有效。

如果文档对象模型无效，则jQuery无法正确使用选择器。

如果id正确且文档对象模型验证无误，则可以使用以下方法读取选择选项的值：

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

设置选择框选项的值

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

阅读选定的文本

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

- redsquare

---

@Html.DropDownList("CoinTypes", (SelectList)ViewBag.RequiredLevel, new { @class = "form-control",@style="height: 21px;margin-top: 5px;"})，但$('#CoinTypes').val(@ViewBag.CoinType);未选择。 - Nithin Paul

@NithinPaul，这不是评论，而是提出一个问题，展现HTML代码，这样其他人才可以尝试并找出问题所在。我不确定你如何期望任何人能够从一些Web表单/MVC代码中找到问题！ - redsquare

Answer 3

$('#myId').val()应该可以完成，如果失败了，我会尝试：

$('#myId option:selected').val()

- karim79

Answer 4

当使用JQM进行设置时，不要忘记更新UI：

$('#selectId').val('newValue').selectmenu('refresh', true);

- Jasper Giscombe

---

谢谢你的帮助 - 我一直在想，为什么使用 $("#slot-choice").prop("selectedIndex", n) 更改 selectedIndex 后新值不会显示在屏幕上。 - Samik R

Answer 5

$("#myId").val() 如果 myid 是选择元素的id，则应该能够正常工作！

这将设置所选项：$("#myId").val('VALUE');

- Rigobert Song

Answer 6

假设您使用SELECT标签创建了一个下拉列表，如下所示：

<select id="Country">

现在，如果您想使用JQuery查看下拉列表中选择的值，只需放置以下行以检索该值。

var result= $("#Country option:selected").text();

它会正常工作。

- JaySing

Answer 7

$( "#myId option:selected" ).text(); 将会给你下拉元素中所选的文本。无论如何，你可以将它改为 .val(); 来获取它的值。请查看下面的代码

<select id="myId">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>`
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>

- Wikum W

Answer 8

我知道这已经过时了，但我刚刚在Razor上遇到了一些麻烦，无论我怎么努力都无法使其正常工作。无论我使用“text”还是“html”属性，它都会返回“未定义”。最后，我添加了“data-value”属性到选项中，它就可以正常读取了。

 <option value="1" data-value="MyText">MyText</option>

 var DisplayText = $(this).find("option:selected").attr("data-value");

- Darkloki

Answer 9

试试这个

$('#your_select_element_id').val('your_value').attr().add('selected');

- Syed Nazir Hussain