javascript - Firefox 中的多选错误

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()