jquery - 信頼できる選択/カスケード ドロップダウンのリスト

Question

jQueryで信頼できる選択を実装しようとしています。このシナリオがあるとしましょう：

ユーザーは複数の項目を選択できますが、選択するたびに 1 つの項目が対象になります。項目は一意です。ユーザーは項目を 1 回しか選択できません。ユーザーが最初の選択で 1 つのアイテムを選択すると、他のアイテムでも使用できるようになり、その逆も同様です。最初は 1 つの選択のみが表示されます (ユーザーは少なくとも 1 つの項目を選択する必要があります)。ユーザーが別のものを追加したい場合は、新しい選択を表示するリンクをクリックできます。

次のコードを思いつきましたが、選択がクローンからオーバーライドされるため、正しく機能しません。私はここで立ち往生しており、クローンを使用しない別のアプローチをすでに試しました。どちらも機能しませんでした。私にできることはありますか？

編集：最終的に解決策を見つけたようです..ここでコードを適切に変更しました。

<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-managed-dependent-or-cascading-select-list/