使用jQuery向表单添加另一个下拉列表
一旦在第一个下拉列表中选择了一个选项,我将尝试向表单中添加另一个下拉列表 下面是表格的一部分。当选择带有名称的下拉列表时,在本例中有3个类,EDMATH 502、EDTECH 401、Math 101,我希望在下一个下拉列表图像\u os\u image\u id中显示不同的图像id。其想法是每个类都可以访问不同的图像 我知道这是jquery的工作,但我花了很长时间才弄明白如何做到这一点。我已经搜索了很多次了,但是由于搜索不好,或者我总是在列表中添加另一个选项,而不是添加另一个列表,所以我遇到了一些阻碍使用jQuery向表单添加另一个下拉列表,jquery,Jquery,一旦在第一个下拉列表中选择了一个选项,我将尝试向表单中添加另一个下拉列表 下面是表格的一部分。当选择带有名称的下拉列表时,在本例中有3个类,EDMATH 502、EDTECH 401、Math 101,我希望在下一个下拉列表图像\u os\u image\u id中显示不同的图像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 -->
谢谢你的帮助
Hi first将您的第二个select id从“select01”更改为“select02”-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;
}
})
});
您是否使用任何服务器端代码?我通常的方法是使用对服务器的Ajax调用动态生成第二个下拉列表,服务器将返回下拉列表的HTML。不能有两个ID相同的元素。ID应该是唯一的。没有服务器端。当我知道如何添加第二个下拉列表时,将修复ID…我希望这对您有所帮助。。但这个想法是。。触发更改时,必须绑定到第一个下拉列表的更改事件,然后删除第二个下拉列表的内容,并根据选择重新填充。。让我知道它是否适合你是的,天哪,这是可行的。非常感谢阿德里安!这将有助于我保护自己的皮肤。