首页 > 代码库 > 原生JavaScript的省市县三级联动

原生JavaScript的省市县三级联动

三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的、

 

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三级联动菜单</title><style>select {font-family: "萝莉体 第二版";}.hide {display: none;}</style></head><body><div><select id="province"><option>-请选择-</option></select><select id="city" class="hide"><option>-请选择-</option></select><select id="area" class="hide"><option>-请选择-</option></select></div><script>var provinceList = [北京市, 河北省, 浙江省];var cityList = [[东城区, 西城区, 海淀区], [廊坊市, 唐山市, 石家庄市, 承德市], [杭州市, 温州市, 宁波市, 嘉兴市, 绍兴市]];var areasList = [[[东城区1, 东城区2, 东城区3],[西城区1, 西城区2, 西城区3],[海淀区1, 海淀区2, 海淀区3]],[[廊坊市1, 廊坊市2, 廊坊市3, 廊坊市4],[唐山市1, 唐山市2, 唐山市3, 唐山市4],[石家庄市1, 石家庄市2, 石家庄市3, 石家庄市4],[承德市1, 承德市2, 承德市3, 承德市4]],[[杭州市1, 杭州市2, 杭州市3, 杭州市4, 杭州市5],[温州市1, 温州市2, 温州市3, 温州市4, 温州市5],[宁波市1, 宁波市2, 宁波市3, 宁波市4, 宁波市5],[嘉兴市1, 嘉兴市2, 嘉兴市3, 嘉兴市4, 嘉兴市5],[绍兴市1, 绍兴市2, 绍兴市3, 绍兴市4, 绍兴市5]]];//1.获取元素var province = document.getElementById("province");var city = document.getElementById("city");var area = document.getElementById("area");//2.给省的选择框赋值,// ----使用自执行函数,避免污染全局变量-----(function () {for (var i = 0; i < provinceList.length; i++) {var myOption = document.createElement("option");myOption.innerHTML = provinceList[i];//设置value值myOption.value = i;province.appendChild(myOption);}})();//3.设置选择省的行为函数province.onchange = function (e) {city.style.display = "inline-block"; //设置第二个出现while (city.children.length > 1) { //当省设置为“请选择”时,移除子元素city.removeChild(city.lastElementChild);}while (area.children.length > 1) { //当市设置为“请选择”时,移除子元素area.removeChild(area.lastElementChild);}if (cityList[this.value]) {//当设置为请选择时不显示列表for (var i = 0; i < cityList[this.value].length; i++) { //添加市的列表var myOption = document.createElement("option");myOption.innerHTML = cityList[this.value][i];//设置value值myOption.value = i;city.appendChild(myOption);}}};//4.设置选择市的行为函数city.onchange = function (e) {area.style.display = "inline-block"; //设置第二个出现while (area.children.length > 1) { //当市设置为“请选择”时,移除子元素area.removeChild(area.lastElementChild);}if (areasList[province.value][this.value]) {//当设置为"请选择"时不显示列表for (var i = 0; i < areasList[province.value][this.value].length; i++) { //添加市的列表var myOption = document.createElement("option");myOption.innerHTML = areasList[province.value][this.value][i];area.appendChild(myOption);}}}</script></body></html>

 

原生JavaScript的省市县三级联动