原生js实现级联下拉列表
Posted tuna
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现级联下拉列表相关的知识，希望对你有一定的参考价值。
<!DOCTYPE> <html> <head> <title>级联下拉列表</title> <meta charset="UTF-8"> </head> <body onload="load()"> <div> <select class=‘prov‘ id=‘prov‘ onchange=‘changeCity()‘> <option value=‘‘>--请选择省--</option> </select> <select class=‘city‘ id=‘city‘> <option value=‘‘>--请选择市--</option> </select> </div> <script> var province=document.getElementById("prov"); var city=document.getElementById("city"); var arr_prov=new Array(new Option("--请选择省--",‘‘),new Option("湖南","hn"),new Option("广东","gd")); var arr_city=new Array(); arr_city[0]=new Array(new Option("--请选择市--",‘‘)); arr_city[1]=new Array(new Option("长沙",‘cs‘),new Option("娄底",‘ld‘),new Option("永州",‘yz‘)); arr_city[2]=new Array(new Option("广州",‘gz‘),new Option("深圳",‘sz‘)); //动态载入所有省份 function load(){ for(var i=0;i<arr_prov.length;i++){ province.options[i]=arr_prov[i]; } } //选中省份之后，根据索引动态载入相应城市 function changeCity(){ //清空上次的选项 city.options.length=0; //获取省一级的下拉列表选中的索引 var index=province.selectedIndex; for(var i=0;i<arr_city[index].length;i++){ city.options[i]=arr_city[index][i]; } } </script> </body> </html>
要点：
1.省份信息可以在页面加载时就导入
2.城市信息随着省份选择的改变而改变，故应放在省份的onchange函数内
3.本例核心：selectedIndex属性，下拉列表所选中项的索引
4.一个bug处理：若不加上“city.options.length=0”，则在city列表中，上一省份对应城市的结果会影响下一省份的城市列表（不妨试一试）；故要用这条代码清空列表，消除影响。
以上是关于原生js实现级联下拉列表的主要内容，如果未能解决你的问题，请参考以下文章