使用jQuery將另一個下拉列表添加到表單中

Question

我試圖在第一個下拉列表中選中一個選項後，向表單添加另一個下拉列表。

所以下面是表格的一部分。當選擇名稱下拉菜單時，在這種情況下，有3個類，EDMATH 502，EDTECH 401，數學101，我希望不同的圖像ID出現在下一個下拉列表中（「image_os_image_id」）。這個想法是每個班級都可以訪問不同的圖像。

我知道這是一個jQuery的工作，但我有一段時間搞清楚如何做到這一點。我已經搜索了很多，但是由於搜索質量差或者我似乎總是想出點擊向列表中添加另一個選項而不是添加其他列表，而受到阻礙。

<div class="control-group"> 
    <label class="control-label" for="select01">Class</label> 
    <div class="controls"> 
     <select id="select01" name="class_name"> 
      <option value='EDMATH 502'>EDMATH 502</option> 
      <option value='EDTECH 401'>EDTECH 401</option> 
      <option value='Math 101'>Math 101</option> 
     </select> 
    </div> 
    <!-- class --> 
</div> 
<div class="control-group" </div> 
    <label class="control-label" for="select01">Image</label> 
    <div class="controls"> 
     <select id="select01" name="image_os_image_id"> 
      <option value='647abf63-fd95-42a7-a744-e1885f8d5c16'>photoshop</option> 
      <option value='0f53de4a-1bb6-43bd-a567-fe181b25cfbe'>matlab</option> 
      <option value='647abf63-fd95-42a7-a744-e1885f8d5c16'>photoshop</option> 
      <option value='0f53de4a-1bb6-43bd-a567-fe181b25cfbe'>matlab</option> 
     </select> 
    </div> 
    <!-- image --> 
</div> 
<!-- control group --> 

感謝您的幫助！

Answer 1

1. 嗨首先從 'select01' 到 'select02' 改變你的第二個選擇ID - ID應該是唯一的
2. 包括jQuery的

3. 添加腳本

   $(document).ready(function(){ 
        $('#select01').bind('change', function(){ 
   
         $('#select02 option').remove(); 
   
         switch($(this).val()) { 
         case 'EDMATH 502': 
          $('#select02').append('<option value="647abf63-fd95-42a7-a744-e1885f8d5c16">photoshop</option>'); 
          $('#select02').append('<option value="0f53de4a-1bb6-43bd-a567-fe181b25cfbe">matlab</option>'); 
          $('#select02').append('<option value="647abf63-fd95-42a7-a744-e1885f8d5c16">photoshop</option>'); 
          $('#select02').append('<option value="0f53de4a-1bb6-43bd-a567-fe181b25cfbe">matlab</option>'); 
          break; 
         case 'EDTECH 401': 
          $('#select02').append('<option value="test1">test1</option>'); 
          $('#select02').append('<option value="test2">test11</option>'); 
          break; 
         case 'Math 101': 
          $('#select02').append('<option value="test2">test2</option>'); 
          $('#select02').append('<option value="test22">test22</option>'); 
          break; 
         } 
   
   
   
        }) 
       });