动态添加无限级关联下拉菜单 - JavaScript/jQuery 实现
要实现动态添加无限制关联下拉菜单,需要以下步骤:
- 创建 HTML 页面,包含两个或多个下拉菜单。
- 使用 JavaScript 或 jQuery 监听第一个下拉菜单的 change 事件。
- 在 change 事件处理程序中,获取选中的值,并根据该值生成下一个下拉菜单的选项。
- 将新选项添加到第二个下拉菜单中。
- 重复步骤 2-4 直到需要的下拉菜单数量。
下面是一个基于 jQuery 的示例代码:
HTML 代码:
<select id='select1'>
<option value=''>请选择</option>
<option value='1'>选项1</option>
<option value='2'>选项2</option>
</select>
<select id='select2'>
<option value=''>请选择</option>
</select>
JavaScript/jQuery 代码:
$(function() {
// 监听第一个下拉菜单的 change 事件
$('#select1').on('change', function() {
var selectedValue = $(this).val();
// 如果选中了一个有效值
if (selectedValue) {
// 生成下一个下拉菜单的选项
var options = '';
for (var i = 1; i <= 3; i++) {
options += '<option value=' + selectedValue + '-' + i + '>子选项' + i + '</option>';
}
// 将新选项添加到第二个下拉菜单中
$('#select2').html(options);
// 重复步骤 2-4 直到需要的下拉菜单数量
// ...
} else {
// 如果没有选中有效值,将第二个下拉菜单清空
$('#select2').html('<option value=''>请选择</option>');
}
});
});
这是一个简单的示例,你可以根据实际需求进行修改和扩展。
原文地址: https://www.cveoy.top/t/topic/oLgw 著作权归作者所有。请勿转载和采集!