2个相关的多选表单元素答案

【问题标题】：2 related Multiselect form elements2个相关的多选表单元素
【发布时间】：2011-09-13 20:15:39
【问题描述】：

我想并排创建 2 个多选。第一个已填充，但第二个为空。只有当我从第一个选项中选择一个选项并且取决于第一个选项的值时，才会填充第二个选项。

我认为唯一的方法是使用 javascript。有人可以证实这一点，你知道现有的例子吗？

我正在使用 jquery，但不喜欢使用插件。我也在考虑使用 Zend，所以如果存在现有组件，那就太好了。

【问题讨论】：

标签： javascript jquery forms zend-framework multi-select

【解决方案1】：

Here's a demo

您可以通过一些 DOM 操作轻松做到这一点。

HTML

<select id="from" multiple>
    <option value="-">King</option>
    <option value="9">Queen</option>
    <option value="5">Rook</option>
    <option value="3">Knight</option>
    <option value="3">Bishop</option>
    <option value="1">pawn</option>
</select>

<select id="to" multiple>
</select>

javascript

var from = document.getElementById("from");
var to = document.getElementById("to");

from.onchange = function(){
    //remove this to allow for duplicates
    to.innerHTML = "";
    var fromOptions = from.getElementsByTagName("option");
    for(var i in fromOptions) {
        if (fromOptions[i].selected == true) {
            //remove "cloneNode(true)" to simultaniusly 
            //remove the node from the from list.
            to.appendChild(fromOptions[i].cloneNode(true));
        }
    }
}

【讨论】：