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

Question

我编写了一个插件，可以将 <select multiple> 转换为多个互斥的单个 <select>。

初始 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

除非有人另有说明，否则您无法从 <option> 元素的 DOM 中删除 selected 属性似乎是 IE 中的一个缺陷。

我的第一个解决方法是使用键和文本值创建新元素，例如

$('#template').children().each(function(){
    $select.append($('<option>', {'value': $(this).val(), text: $(this).text()}));
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/t9p2bgt0/4/

第二个是对新目标 <select> 的 HTML 中有问题的字符串进行文本替换，但我想不出这个版本的可靠版本。

Answer 2

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

示例 1：

这会尝试清除 selected，并且警报仍然显示 selected 选项：

$('#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>

例二：

这会清除 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>

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

Removing "selected" atttribute from cloned select options not working in IE

jquery

attributes

html-select

selected