jquery - 使用 jQuery 向表单添加另一个下拉列表

Question

在第一个下拉列表中选择一个选项后，我正在尝试将另一个下拉列表添加到表单中。

所以下面是表格的一部分。When the dropdown with the name is selected, in this case there are 3 classes, EDMATH 502, EDTECH 401, Math 101, I want different image IDs to appear in the next dropdown ("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. 您好，首先将您的第二个选择 ID 从“select01”更改为“select02”-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;
               }
   
   
   
           })
       });