2

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

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

​</p>

4

1 回答 1

3

因为第一个下拉菜单不是多选，并且它只能有一个选中项，所以 DOM 将被规范化，只有一个选项的selected属性设置为true.

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

从未使用过原型，但我想出了这样的东西：

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

jsFiddle - 仅在 Chrome 中测试

于 2012-10-19T23:14:53.130 回答