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

发布于 2024-10-17 06:29:55 字数 9512 浏览 2 评论 0原文

我正在尝试使用 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>

原文

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 & Files</option>
            <option value="permissions">User & Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help">
            <option value="contacts-tagging">Contacts & Tagging</option>
            <option value="import-export">Import & Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases & 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 & Files</option>
            <option value="permissions">User & Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help"><option value="contacts-tagging">Contacts & Tagging</option>
            <option value="import-export">Import & Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases & 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 & Files</option>
            <option value="permissions">User & Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help">
            <option value="contacts-tagging">Contacts & Tagging</option>
            <option value="import-export">Import & Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases & 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 & Files</option>
            <option value="permissions">User & Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help"><option value="contacts-tagging">Contacts & Tagging</option>
            <option value="import-export">Import & Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases & 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 & Files</option>
            <option value="permissions">User & Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help">
            <option value="contacts-tagging">Contacts & Tagging</option>
            <option value="import-export">Import & Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases & 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 & Files</option>
            <option value="permissions">User & Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help">
            <option value="contacts-tagging">Contacts & Tagging</option>
            <option value="import-export">Import & Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases & 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 & Files</option>
            <option value="permissions">User & Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help">
            <option value="contacts-tagging">Contacts & Tagging</option>
            <option value="import-export">Import & Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases & 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 & Files</option>
            <option value="permissions">User & Permissions</option>
        </optgroup>
        <optgroup label="Service Management Help">
            <option value="contacts-tagging">Contacts & Tagging</option>
            <option value="import-export">Import & Export</option>
            <option value="orders">Orders</option>
            <option value="scheduling">Scheduling</option>
            <option value="service-cases-service">Service Cases & 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>

分享到QQ

分享到微博