2 related Multiselect form elements

I want to create 2 multiselect side by side. The first one is populated, but the 开发者_运维问答2nd is empty. The 2nd gets populated only when I select an option from the 1st one and depends on the value of the 1st one.

I'm thinking the only way to do this is with javascript. Can someone confirm this, and do you know of existing examples.

I'm using jquery, but prefer to not use plugins. I'm also thinking to use Zend so if an existing component exists that would be great.

Here's a demo

You can easily do this with some DOM manipulation.

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