如何始终使用 IE 和 FF 让 jQuery 以编程方式在此选择列表中的项目？

Posted 2023-05-09

【中文标题】如何始终使用 IE 和 FF 让 jQuery 以编程方式在此选择列表中的项目？

【英文标题】：How can I get jQuery to programmatically items in this select list using IE and FF consistently?

【发布时间】：2014-03-18 13:03:06

【问题描述】：

我有一些 jQuery 代码可以在选择列表中选择一个选项。第一次选择一个项目时一切正常，但是第二次通过 IE 和 FF 不会清除所选项目。 Chrome 始终有效。

I have created a JSFiddle 带有我所看到的演示。我已经尝试将$("testUpdate option:selected") 和$("testUpdate > option:selected") 作为选择器，每个都只在第一次工作。我尝试将多个标签更改为多个per this documentation。

这是 html 和相关的失败 jQuery。我一直在使用 jQuery 1.9.1，但在 JSFiddle 上我看到新版本的结果相同。

//HTML
<select id="testUpdate" name="testUpdateName" multiple="multiple" size="5">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

//jQuery that fails the 2nd pass
$("#testUpdate option:selected").each(function () 
    //This is not executed
    $(this).removeAttr('selected');
);

//Alternate selector to force all options to always be checked
//HTML is correct after this, but visually the list is not selected
//I would also prefer not to do this because the actual list will be hundreds of items
$("#testUpdate option").each(function () 
   $(this).removeAttr('selected');
);

【参考方案1】：

selected 值不会添加到 DOM 元素中，因此不是选项的属性。你应该使用$.prop():

$("#testUpdate option[value='" + this.getCurrentSelectionValue() + "']").prop('selected', 'selected');

Fiddle

【讨论】：

$.prop() 不会更新实际的 DOM；它只会改变元素的外观。如果您查看任何调试器中的 HTML 呈现，您将不会在选项中看到 selected 属性。如果您还想更新 DOM，则需要同时使用 $.attr() 和 $.prop()。

啊，我现在看到了这个问题的不同之处。 prop vs attr