Jquery 可靠选择/级联下拉列表

我试图用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>

---

为什么不使用jquery插件呢

范例

---

恐怕这不是我需要的。在我的例子中，应该总是所有的值减去已经选择的值。

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