javascript - 将选项从 移动到 - 选项 select 属性被破坏了吗？

Question

我正在尝试为 Prototype 编写一个插件，用户在其中单击下拉菜单并将其替换为多选元素。我快完成了。在用户选择他们想要显示的内容并将表单提交到同一页面之前，一切都很好。我正在使用 PHP 来使用 selected 标记的 <option> 属性来保留用户选择的内容。所以我的插件在那之后运行并将选项复制到多选，这就是问题所在。假设用户选择了 3 个项目，在多选的 html 代码中，所有 3 个项目都具有 selected 属性，但只有最后一个会被突出显示，并且在此时重新提交表单时，它实际上只提交突出显示的那个。 Here is a demo. 对此有任何帮助都将非常有用。谢谢。

HTML

<select id="test1">
    <option>Option 1</option>
    <option selected="selected">Option 2</option>
    <option selected="selected">Option 3</option>
</select>

<select id="test2" multiple="multiple">
</select>​

JavaScript

$('test1').childElements().each(function(option){
    $('test2').insert(option);
});

Answer 1

因为第一个下拉列表不是多选的，它只能有一个被选中的项目，DOM 将被规范化，只有一个选项的 selected 属性设置为 是的。

似乎当你复制它们时，属性仍然存在，所以你必须读取它并相应地设置 selected 属性。

从未使用过原型(prototype)，但我想到了这样的东西:

$('test1').childElements().each(function(option){
    $('test2').insert(option);
    option.selected = $(option).readAttribute('selected');
});

jsFiddle - 仅在 Chrome 中测试