jquery - 从克隆的选择选项中删除 "selected"属性在 IE 中不起作用

Question

我编写了一个插件，可以转换 <select multiple>分成多个、互斥、单个<select> s。

渲染的初始 HTML 有多个 <option selected>其设置服务器端:

<select id="template" style="display: none;" multiple="">
    <option value="1">One</option>
    <option value="2" selected="">Two</option>
    <option value="3">Three</option>
    <option value="4" selected="">Four</option>
    <option value="5">Five</option>
    <option value="6" selected="">Six</option>
    <option value="7">Seven</option>
</select>

当我克隆<option>时进入一系列新列表(每个选定选项一个)，我注意到 removeAttr("selected")仅在 IE 中不删除所选属性:

例如这段代码:

$('#template').children().clone().removeAttr('selected').appendTo($select);

在 IE 上的 DOM 中结果如下:

<li class="listClass">
    <select class="selectClass">
        <option value="1">One</option>
        <option value="2" selected="">Two</option>
        <option value="3">Three</option>
        <option value="4" selected="">Four</option>
        <option value="5">Five</option>
        <option value="6" selected="">Six</option>
        <option value="7">Seven</option>
    </select>
</li>

但在 Chrome 中正确显示:

<li class="listClass">
    <select class="selectClass">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
        <option value="7">Seven</option>
    </select>
</li>

这是一个模型:http://jsfiddle.net/TrueBlueAussie/t9p2bgt0/1/使用 Chrome 和 IE 尝试一下，看看它们各自 DOM 检查器的差异。

我意识到这不会影响新列表的操作，但我更愿意清理 <option> s html 当它们被克隆时，所以需要知道是否有解决方法。

注释:

• 使用prop('selected', false)相反，仅更改内部状态，并且属性保留在那里(在 IE 和 Chrome 中)。
• 使用removeProp('selected')对 DOM 没有影响。

Answer 1

使用defaultSelected而不是selected，并使用prop将其设置为null而不是使用removeAttr。

示例 1:

这会尝试清除选定，并且警报仍显示选定选项:

$('#template').children().prop('selected', null);
alert($('#template').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="template" style="display: none;" multiple="">
    <option value="1">One</option>
    <option value="2" selected="">Two</option>
    <option value="3">Three</option>
    <option value="4" selected="">Four</option>
    <option value="5">Five</option>
    <option value="6" selected="">Six</option>
    <option value="7">Seven</option>
</select>

示例 2:

这会清除defaultSelected，从而成功清除selected选项:

$('#template').children().prop('defaultSelected', null);
alert($('#template').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="template" style="display: none;" multiple="">
    <option value="1">One</option>
    <option value="2" selected="">Two</option>
    <option value="3">Three</option>
    <option value="4" selected="">Four</option>
    <option value="5">Five</option>
    <option value="6" selected="">Six</option>
    <option value="7">Seven</option>
</select>