本文实例讲述了原生JavaScript实现的简单省市县三级联动功能。分享给大家供大家参考,具体如下:
三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>三级联动菜单& lt;/title>
& lt; style>
选择{
字体类型:“萝莉体第二版”;
}
hide {
显示:没有;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div>
& lt;选择id=笆 北?
& lt; option>——请选择& lt;/option>
& lt;/select>
& lt;选择id=俺鞘小崩?耙亍痹?
& lt; option>——请选择& lt;/option>
& lt;/select>
& lt;选择id=扒颉崩?耙亍痹?
& lt; option>——请选择& lt;/option>
& lt;/select>
& lt;/div>
& lt; 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?. getelementbyid(“省”);
城市var=. getelementbyid(“城市”);
var面积=. getelementbyid(“区域”);//2 .给省的选择框赋值,//- - - - -使用自执行函数,避免污染全局变量- - - - - -
(函数(){
(var=0;我& lt;provinceList.length;我+ +){
var myOption=document.createElement(“选项”);
myOption。innerHTML=provinceList[我];//设置值值
myOption。值=https://www.yisu.com/zixun/i;
province.appendChild (myOption);
}
}) ();//3 .设置选择省的行为函数
省。onchange=function (e) {
city.style。显示=" inline-block”;//设置第二个出现
而(city.children。长度比;1){//当省设置为“请选择”时,移除子元素
city.removeChild (city.lastElementChild);
}
而(area.children。长度比;1){//当市设置为“请选择”时,移除子元素
area.removeChild (area.lastElementChild);
}
如果(cityList [this.value]){//当设置为请选择时不显示列表
(var=0;我& lt;cityList [this.value] . length;我+ +){//添加市的列的表
var myOption=document.createElement(“选项”);
myOption。innerHTML=cityList [this.value][我];//设置值值
myOption。值=https://www.yisu.com/zixun/i;
city.appendChild (myOption);
}
}
}；//4 .设置选择市的行为函数
的城市。onchange=function (e) {
area.style。显示=" inline-block”;//设置第二个出现
而(area.children。长度比;1){//当市设置为“请选择”时,移除子元素
area.removeChild (area.lastElementChild);
}
如果(areasList [province.value] [this.value]){//当设置为“请选择”时不显示列表
(var=0;我& lt;areasList [province.value] [this.value] . length;我+ +){//添加市的列的表
var myOption=document.createElement(“选项”);
myOption。innerHTML=areasList [province.value] [this.value][我];
area.appendChild (myOption);
}
}
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
运行效果图如下:
更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》,《JavaScript查找算法技巧总结》,《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》,《JavaScript数据结构与算法技巧总结》,《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
