Question

我有多个选择值的特定问题。

<form id="form-to-submit">
    <select multiple="true" name="sel" id="sel">
        <option id="0_1" value="0">Bacon</option>
        <option value="1">Pickles</option>
        <option id="0_3" value="2">Mushrooms</option>
        <option value="3">Cheese</option>        
    </select>
</form>
<button id="setValues">Set Values</button>

JS:
$("#setValues").click(function() {
    $("#sel").find("option").removeAttr("selected");
    $("#0_1").attr("selected","selected");
    $("#0_3").attr("selected","selected");

});

我创建了一个显示问题的JSfiddle：

单击“设置值”按钮时，将清除所有选项选择属性，然后将其设置为第一个和第三个选项。

问题：在第二次单击“设置值”按钮后的Firefox中，它会清除选择值。在其他浏览器中它运作良好。

有什么想法吗？

Answer 1

即时解决方案!!!!

$("#0_1").prop("selected", true);
$("#0_3").prop("selected", true);

一些解释 ？!!？

那么，.attr()和.prop()之间有什么区别!!!

基本上，属性是DOM元素，而属性是HTML元素，后来使用浏览器解析器解析为DOM树。

由于不同浏览器之间存在一些不一致的行为，因此最好使用.prop（）而不是.attr（）。

引自jQuery API Documentation ：

“要检索和更改DOM属性，例如表单元素的已选中，已选中或已禁用状态，请使用.prop（）方法。”

您想要切换到.prop（）有很多原因。这是一个很棒的主题，帮助我深入了解.attr（）和.prop（）;）

.prop() vs .attr()

Answer 2

两件事：

要设置所选状态，请使用prop，而不是attr。
在CSS选择器和id cannot start with a digit中，#0_1和#0_3是无效的选择器。（它们碰巧工作是因为jQuery中的优化，其中显然是id选择器的东西最终会转到getElementById而不是像querySelectorAll这样的CSS选择器解析器或者Sizzle自己的解析器，但它不是你应该依赖的东西。例如，如果你有一个id="123"的元素和一个带有类foo的元素，{ {1}}会抛出错误。）

修正：

$("#123 foo")

Updated fiddle

Firefox中的多选错误

2 个答案: