2 связанных элемента формы Multiselect

Question

Я хочу создать 2 множественных выбора рядом.Первый заполнен, а второй пуст.2-й заполняется только тогда, когда я выбираю вариант из 1-го, и зависит от значения 1-го.

Я думаю, что единственный способ сделать это с помощью 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>

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