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

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/