Javascript Firefox中的多选择错误

我有一个关于多个选择值的特定问题

<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");

});

我用板条箱装了一个显示问题的：

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

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

有什么想法吗

即时解决方案

有什么解释

那么，和之间的区别是什么

基本上，属性是DOM元素的属性，而属性是HTML元素的属性，这些元素随后使用浏览器解析器解析为DOM树

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

引自：

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

有很多原因让你想改用.prop。这里有一个很棒的线程，它帮助我深入研究了更多的.attr和.prop

两件事：

要设置选定状态，请使用prop，而不是attr

在CSS选择器和id中，因此0\u 1和0\u 3是无效的选择器。它们之所以能够正常工作，是因为jQuery中进行了优化，其中某些显然是id选择器的东西最终会转到getElementById，而不是像querySelectorAll或Sizzle自己的解析器这样的CSS选择器解析器，但这不是您应该依赖的东西。例如，如果您有一个id=123的元素，其中有一个foo类的元素，$123 foo将抛出一个错误

修正：

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

$("#setValues").click(function() {
    $("#sel").find("option").removeAttr("selected");
    $("#x0_1").prop("selected",true);
    $("#x0_3").prop("selected",true);

});

---

这对我有用。attr在chrome上运行平稳，但在IE Edge和firefox上失败。道具成功了。谢谢

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

$("#setValues").click(function() {
    $("#sel").find("option").removeAttr("selected");
    $("#x0_1").prop("selected",true);
    $("#x0_3").prop("selected",true);

});