JSON二级联动下拉菜单是一种常见的前端开发技术,可以根据用户选择的内容动态加载下一级别的选项。这种技术对于需要大量选项的表单非常有用,可以让用户更快速、精确地选择想要的内容。
下面是一个简单的例子:
<select id="first"> <option value="1">选项1</option> <option value="2">选项2</option> </select> <select id="second"></select> <script> var data = { "1": ["子选项1", "子选项2", "子选项3"], "2": ["子选项4", "子选项5", "子选项6"] }; var first = document.getElementById("first"); var second = document.getElementById("second"); first.addEventListener("change", function() { var selectedOption = this.options[this.selectedIndex].value; second.innerHTML = ""; for (var i = 0; i < data[selectedOption].length; i++) { var option = document.createElement("option"); option.text = data[selectedOption][i]; option.value = data[selectedOption][i]; second.add(option); } }); </script>
上面的代码创建了两个下拉菜单,一个是一级选项,一个是二级选项。当用户选择一级选项时,根据选择的值动态加载二级选项列表。
首先创建了一个名为data的对象,它包含了每个一级选项对应的二级选项列表。然后获取一级选项和二级选项的元素对象,给一级选项添加了一个监听器,当用户选择一级选项时,获取选择的值,遍历对应的二级选项列表,创建Option元素并添加到二级选项菜单中。这个过程可以使用innerHTML实现,也可以使用appendChild方法来添加Option元素。
这个例子非常简单,但是能够满足大多数情况下的需求。当然,要想实现更复杂的需求,还需要根据实际情况进行扩展。