使用jQuery将另一个下拉列表添加到表单中

我试图在第一个下拉列表中选中一个选项后，向表单添加另一个下拉列表。使用jQuery将另一个下拉列表添加到表单中

所以下面是表格的一部分。当选择名称下拉菜单时，在这种情况下，有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 -->

感谢您的帮助！

来源

2012-07-27 curtis

您在使用任何服务器端代码？我通常的做法是使用对服务器的Ajax调用来生成第二个下拉列表（这将返回下拉菜单的HTML）。 – 2012-07-27 21:24:20

您不能有2个具有相同ID的元素。 ID应该是唯一的。 – 2012-07-27 21:29:27

没有服务器端。当我弄清楚如何添加第二个下拉列表时，将会修复ID ... – curtis 2012-07-27 21:31:50

嗨首先从 'select01' 到 'select02' 改变你的第二个选择ID - ID应该是唯一的
包括jQuery的

添加脚本

$(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; 
      } 



     }) 
    });

来源

2012-07-27 21:35:56

我希望这可以帮助你...但这个想法是..你必须绑定到第一个下拉的变化事件，当一个变化被触发，然后删除第二个的内容，并根据选择重新填充它。让我知道它是否适合你 – 2012-07-27 21:39:33

是的，OMG，这是工作。非常感谢阿德里安！这将帮助我保存自己的皮肤。 – curtis 2012-07-27 21:49:01

使用jQuery将另一个下拉列表添加到表单中

回答

相关问题