2 个相关的多选表单元素

Question

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

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

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

Answer 1

这是一个演示

您可以通过一些 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));
        }
    }
}