2个相关的Multiselect表单元素

Question

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

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

我正在使用jquery，但更喜欢不使用插件。 我也在考虑使用Zend，如果存在一个很好的现有组件。

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