当前位置：首页 > news >正文

javascript 实战案例二级联动下拉选框

news 来源：原创 2025/6/5 11:51:42

本案例完全使用原生javascript实现，使用时只需填充platform_list二维数组即可，platform_list填充规则如下：
[‘一级选项1’,‘二级选项11’,‘二级选项12’,‘二级选项13’,‘二级选项14’,…],
[‘一级选项2’,‘二级选项21’,‘二级选项22’,‘二级选项23’,‘二级选项24’,…],
[‘一级选项3’,‘二级选项31’,‘二级选项32’,‘二级选项33’,‘二级选项34’,…]

以省份和城市为例：

const platform_list = [['云南省','昆明市','曲靖市','昭通市','普洱市','楚雄彝族自治州','大理白族自治州','丽江市'],['陕西省','西安市','咸阳市','安康市','宝鸡市','商洛市','汉中市','延安市']];

以下是实现二级联动选框的代码：

<select name='platform1' id='platform1-select-box'><option value='default'></option>
</select>
<select name='platform2' id='platform2-select-box'><option value='default'></option>
</select>
<script>const platform_list = [//idx0:一级选框选项  idx1~n:对应的二级选框选项['云南省','昆明市','曲靖市','昭通市','普洱市','楚雄彝族自治州','大理白族自治州','丽江市'],['陕西省','西安市','咸阳市','安康市','宝鸡市','商洛市','汉中市','延安市']];//生成一级选框选项var platform1SelectElement = document.getElementById('platform1-select-box');var platform2SelectElement = document.getElementById('platform2-select-box')for(var i = 0; i < platform_list.length; i++){a = document.createElement("option");a.value = platform_list[i][0];a.textContent = platform_list[i][0];platform1SelectElement.appendChild(a);}//监听一级选框变化platform1SelectElement.addEventListener('change', function() {//一级选框选中，获取对应的二级选项var platform2_list = [];for(var i = 0; i < platform_list.length; i++){if(platform1SelectElement.value == platform_list[i][0]){platform2_list = platform_list[i].slice(1, platform_list[i].length);console.log(platform2_list);break;}}//删除二级选框已有选项var elements = document.getElementsByName('platform2-option');while(elements.length > 0){elements[0].remove();}//重新生成选项for(var i = 0; i < platform2_list.length; i++){b = document.createElement("option");b.value = platform2_list[i];b.setAttribute('name', 'platform2-option');b.textContent = platform2_list[i];platform2SelectElement.appendChild(b);}});
</script>