利用JavaScript实现二级联动
要实现JavaScript二级联动效果，首先要确定需要哪些技术：
1.二维数组
2.for in循环
3.new Option(text,value,true,true)
4.add(option,null)
5.onchange() 表单事件
HTML代码：
<!-- <input type="text" id="text"> --> 请选择省份： <selectname=""id="provinces"><!-- <option value="江苏省">江苏省</option> --><optionvalue="请选择省份">请选择省份</option></select> 请选择城市： <selectname=""id="cities"><optionvalue="请选择城市">请选择城市</option></select>
javascript代码：
// 1.二维数组 // 2.for in循环 // 3.new Option(text,value,true,true) // 4.add(option,null) // 5.onchange() 表单事件 // 江苏省：南京市,无锡市,徐州市,常州市,苏州市,南通市; // 浙江省：杭州市,宁波市,金华市,温州市,绍兴市,湖州市; // var arr = [ // [南京市, 无锡市, 徐州市, 常州市, 苏州市, 南通市], // [杭州市, 宁波市, 金华市, 温州市, 绍兴市, 湖州市] // ] // 1.创建二维数组 var province=new Array(); province["江苏省"]=["南京市", "无锡市", "徐州市", "常州市", "苏州市", "南通市"]; province["浙江省"]=["杭州市", "宁波市", "金华市", "温州市", "绍兴市", "湖州市"]; console.log(province); // 获取 省市 下拉菜单 var oProvince=document.getElementById("provinces"); var oCity=document.getElementById("cities"); // 2.利用for循环将省市内容 添加到下拉菜单 for(var i in province){ // console.log(i);// 江苏省 浙江省 // console.log(province[i]) // new Option(i,i);//创建下拉选项 oProvince.add(new Option(i,i),null) } // 3.添加onchange事件 oProvince.onchange=function(){ // console.log(oProvince.value); // 清空 市级下拉列表 oCity.length=0; var oSelect=oProvince.value;//获取选中的省份值 for(var j in province[oSelect]){ oCity.add(new Option(province[oSelect][j],province[oSelect][j]),null) } } // var arr=[1,2,3,4,5,6]; // for(var i in arr){ // console.log(i); // } // onchange事件 // document.getElementById("text").οnchange=function(){ // console.log(this.value); // }
视频讲解链接：
https://www.bilibili.com/video/BV1DA411q71W/
