Список надежных выборок / каскадных выпадающих

Question

Я пытаюсь реализовать надежные выборки с помощью jQuery. Допустим, у меня есть этот сценарий:

Пользователь может выбрать несколько элементов, каждый из которых предназначен для одного элемента. Предметы уникальны - пользователь может выбрать предмет только один раз. Если пользователь выбирает один элемент в первом, он должен быть доступен в других, и наоборот. В начале виден только один выбор (пользователь должен выбрать как минимум один элемент). Если пользователь хочет добавить еще один, он / она может нажать на ссылку, которая отображает новый выбор.

Я придумал следующий код, но он не работает правильно, потому что выборки будут переопределены из клона. Я застрял здесь, и я уже попробовал другой подход, где я не использовал клон. Тоже не сработало. Любые предложения, что я могу сделать?

Изменить: Похоже, что я наконец-то нашел решение.. Я изменил код здесь соответствующим образом.

<style type="text/css">
    select {
        width: 60%;
    }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">

    $(function() {
        var clone = $('#ParentSlug').clone().removeAttr('id');

        $('#categories-selects select').change(function() {
            console.log("change of id: " + $(this).attr('id') );

            $('#categories-selects select').each(function() {
                $this = $(this);
                var id = $this.attr('id');
                var value = $this.val();

                //console.log(id);

                $this.html(clone.html());
                $this.attr('id', id);
                $this.val(value);

                $this.siblings(':visible').each(function() {
                    $this.find("option[value='" + $(this).val() + "']").remove();
                });
            });
        });

        $('.add-select').click(function() {
            $('#categories-selects select:hidden:first').show().change();
            if ($("#categories-selects select:visible").length > 1)
                $(".remove-select").show();
            if ($("#categories-selects select:hidden").length == 0)
                $(".add-select").hide();
        });

        $('.remove-select').click(function() {
            $("#categories-selects select:visible:last").hide().change();
            if ($("#categories-selects select:visible").length == 1)
                $(this).hide();
            if ($("#categories-selects select:hidden").length > 0)
                $(".add-select").show();
        });
    });
</script>

    <select id="ParentSlug">
        <optgroup label="Customer Relationship Management Help">
            <option value="notes-files">Notes &amp; Files</option>
            <option value="permissions">User &amp; Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help">
            <option value="contacts-tagging">Contacts &amp; Tagging</option>
            <option value="import-export">Import &amp; Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases &amp; Service</option>
            <option value="tasks">Tasks</option>
        </optgroup>
    </select>
    <select id="category-1" style="display: none;">
        <optgroup label="Customer Relationship Management Help">
            <option value="notes-files">Notes &amp; Files</option>
            <option value="permissions">User &amp; Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help"><option value="contacts-tagging">Contacts &amp; Tagging</option>
            <option value="import-export">Import &amp; Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases &amp; Service</option>
            <option value="tasks">Tasks</option>
        </optgroup>
    </select>
    <select id="category-2" style="display: none;">
        <optgroup label="Customer Relationship Management Help">
            <option value="notes-files">Notes &amp; Files</option>
            <option value="permissions">User &amp; Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help">
            <option value="contacts-tagging">Contacts &amp; Tagging</option>
            <option value="import-export">Import &amp; Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases &amp; Service</option>
            <option value="tasks">Tasks</option>
        </optgroup>
    </select>
    <select id="category-3" style="display: none;">
        <optgroup label="Customer Relationship Management Help">
            <option value="notes-files">Notes &amp; Files</option>
            <option value="permissions">User &amp; Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help"><option value="contacts-tagging">Contacts &amp; Tagging</option>
            <option value="import-export">Import &amp; Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases &amp; Service</option>
            <option value="tasks">Tasks</option>
        </optgroup>
    </select>
    <select id="category-4" style="display: none;">
        <optgroup label="Customer Relationship Management Help">
            <option value="notes-files">Notes &amp; Files</option>
            <option value="permissions">User &amp; Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help">
            <option value="contacts-tagging">Contacts &amp; Tagging</option>
            <option value="import-export">Import &amp; Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases &amp; Service</option>
            <option value="tasks">Tasks</option>
        </optgroup>
    </select>
    <select id="category-5" style="display: none;">
        <optgroup label="Customer Relationship Management Help">
            <option value="notes-files">Notes &amp; Files</option>
            <option value="permissions">User &amp; Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help">
            <option value="contacts-tagging">Contacts &amp; Tagging</option>
            <option value="import-export">Import &amp; Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases &amp; Service</option>
            <option value="tasks">Tasks</option>
        </optgroup>
    </select>
    <select id="category-6" style="display: none;">
        <optgroup label="Customer Relationship Management Help">
            <option value="notes-files">Notes &amp; Files</option>
            <option value="permissions">User &amp; Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help">
            <option value="contacts-tagging">Contacts &amp; Tagging</option>
            <option value="import-export">Import &amp; Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases &amp; Service</option>
            <option value="tasks">Tasks</option>
        </optgroup>
    </select>
    <select id="category-7" style="display: none;">
        <optgroup label="Customer Relationship Management Help">
            <option value="notes-files">Notes &amp; Files</option>
            <option value="permissions">User &amp; Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help">
            <option value="contacts-tagging">Contacts &amp; Tagging</option>
            <option value="import-export">Import &amp; Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases &amp; Service</option>
            <option value="tasks">Tasks</option>
        </optgroup>
    </select>
</span>
<a class="add-select" href="#"><img src="#" alt="[+]" /></a>
<a class="remove-select" href="#" style="display: none;"><img src="#" alt="[-]" /></a>

Answer 1

Почему вы не используете плагин jquery

• http://www.ajaxray.com/Examples/depend.html

пример

• http://www.ajaxray.com/blog/2007/07/15/javascript-controlled-dependent-or-cascading-select-list/