两个下拉框的值对应

当下拉框的值过多或有明显分类的时候，可以通过选择第一个下拉框的值来改变和选择第二个下拉框的值。

代码

1、界面 2、vue中写的，

change_subclass: function () { let class_value = {}; class_value['industry'] = ['黄磷行业', '钛白粉行业', '涤纶行业', '电镀行业', '锂电池行业', '纺织印染行业', '轮胎行业', '液态奶行业', '中成药行业']; class_value['building'] = ['多层建筑', '高层建筑', '商务办公', '普通办公', '商务酒店', '普通酒店', '商场', '学校', '医院', '泛能站', '数据中心']; class_value['energy'] = ['泛能站']; class_value['dataCenter'] = ['和数据中心']; /*找到两个下拉框*/ let target1 = document.getElementById("str_class"); let target2 = document.getElementById("str_subclass"); /*获取带第一个下拉框的值*/ var selected_class = target1.options[target1.selectedIndex].value; //清空第二个下拉框 while (target2.options.length) { target2.remove(0); } //根据第一个下拉框的内容找到对应的列表 var initial_list = class_value[selected_class]; if (initial_list) { for (var i = 0; i < initial_list.length; i++) { var item = new Option(initial_list[i], i); //将列表中的内容加入到第二个下拉框 target2.options.add(item); } } return target1,target2; },

3、结果

参考： [1]: [https://blog.csdn.net/qq_41584385/article/details/93909266]