Javascript 2个相关的多选表单元素

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

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

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

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

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