单个 <select> 有多个选择的选项答案

【问题标题】：Single <select> has multiple selected options单个 <select> 有多个选择的选项
【发布时间】：2013-04-11 05:24:25
【问题描述】：

我的标签是单选下拉，标签的默认行为。我有三个值，“否”，“是”，“全部”。我正在尝试以编程方式更改所选内容，就像我之前做过一千次一样，使用以下代码（我使用的是 JQuery 1.9.1）：

$('#select').children(':selected').removeAttr('selected');
$('#select').children('option[value="yes"]').attr('selected', 'selected');
$('#select').children(':selected');

我什至不知道这怎么可能，但不知何故，在 10.8.3 上运行的 Chrome 26.0.1410.65 中，将有两个选定的选项。 UI 中只会显示其中一个，但最后一行代码将返回两个元素。

这在 Firefox 16.0.2 中确实可以正常工作，所以我很困惑。有谁知道这是否是 Chrome 的一个怪癖，或者这是正确的行为并且只是改变了？

【问题讨论】：

selected 是一个属性，使用 .prop 方法和 true/false 作为值。
$('#select').children(':selected'); 这一行的意义何在？
@j08691 正如帖子所说，要指出的是，返回的值不止一个。

标签： javascript jquery html

【解决方案1】：

您可以这样做来选择所需的值

 $('#select').val('yes');

【讨论】：

【解决方案2】：

停止尝试使用属性方法来操作属性！旧版本的 jQuery 允许您这样做，但新版本不会。

$('#select').children(':selected').prop("selected",false);
$('#select').children('option[value="yes"]').prop("selected",true);
//$('#select').children(':selected');

尽管 Mohammad Adil 指出 .val() 是一种更好的处理方式。

【讨论】：

【解决方案3】：

您不应使用selected 属性来更改选择的选项。相反，请使用您的 dropdwn 的 selectedIndex 属性。

例如，在您的情况下，您可能想要这样：

document.getElementById('select').selectedIndex = 1;

【讨论】：