原生js实现级联下拉列表
- 格式:pdf
- 大小:48.09 KB
- 文档页数:1
原⽣js实现级联下拉列表
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 province.options[i]=arr_prov[i]; } } //选中省份之后,根据索引动态载⼊相应城市 function changeCity(){ //清空上次的选项 city.options.length=0; //获取省⼀级的下拉列表选中的索引 var index=province.selectedIndex; for(var i=0;i city.options[i]=arr_city[index][i]; } } 要点:1.省份信息可以在页⾯加载时就导⼊ 2.城市信息随着省份选择的改变⽽改变,故应放在省份的onchange函数内 3.本例核⼼:selectedIndex属性,下拉列表所选中项的索引 4.⼀个bug处理:若不加上“city.options.length=0”,则在city列表中,上⼀省份对应城市的结果会影响下⼀省份的城市列表(不妨试⼀试);故要⽤这条代码清空列表,消除影响。