二级联动菜单指的是当后一个下拉菜单的下拉列表随着前一个下拉菜单的下拉列表选中的内容的变化而变化,这被应用在很多地方,比如填写表单时的省份和城市。
现在我们做一个简单的实现。
1.用JavaScript实现
思路:给前一个下拉菜单绑定一个onchange事件,当事件发生时,在省份数组里寻找当前的val,根据val的索引值来确定在后一个下拉菜单中要渲染的下拉菜单列表。然后在删除下一个下拉菜单列表的子元素,之后动态生成n个select数组,并给它设置相应的value值和innerText值。
2.代码实现:
<script>
//一个二级联动菜单,当前一个下拉菜单里的值变化时,后一个下拉菜单里的值整体也发生改变。
var province = ["陕西","江苏","山东"];
var city = [["西安市","渭南市",