List of dependable selects / cascading dropdowns

I'm trying to implement dependable selects with jQuery. Let's say I have this scenario:

The user can choose several items, every select is for one item. The items are unique - the user can only choose an item once. If the user chooses one item in the first select it should be available in the others and vice versa. At the beginning only one select is visible (the user has to choose one item at least). If the user wants to add another one, s/he can click on a link which displays a new select.

I came up with the following code, but it's not working correct because the selects will overridden from the clone. I'm stuck here and I already tried another approach where I didn't use a clone. Didn't work either. Any suggestions what I can do?

Edit: Seems like I finally found the solution.. I changed the code appropriately here.

<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>

---

why dont you use jquery plugin

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

example

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