javascript - 将选项从 <select> 移动到 <select multiple> - 选项选择属性被破坏？

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 中测试