JavaScript的三级联动

  <select id="provice"><option value="-1">请选择</option></select><select id="city"></select><select id="country"></select><script>//创建数组保存各个省份城市地区//省份：一维数组var proviceArr=['江西','福建','浙江'];//城市：二维数组var cityArr=[['上饶市','南昌市','萍乡市'],['福州市','厦门市','三明市'],['杭州市','温州市','绍兴市']];//地区：三维数组var countryArr=[[['广丰县','玉山县','上饶县'],['东湖区','西湖区','青云谱区'],['安源区','湘东区','上栗县']],[['鼓楼区','晋安区','马尾区'],['湖里区','海沧区','集美区'],['三元区','梅列区','永安市']],[['上城区','下城区','江干区'],['鹿城区','龙湾区','瓯海区'],['越城区','柯桥区','上虞区']]];function createOption(obj,data){for(var i in data){var op=new Option(data[i],i);console.log(op);obj.options.add(op);console.log(obj.options);}}var provice=document.getElementById('provice');createOption(provice,proviceArr);var city=document.getElementById('city');provice.onchange=function(){city.options.length=0;createOption(city,cityArr[provice.value]);if(provice.value>=0){city.onchange();}else{country.options.length=0;}}var country=document.getElementById('country');city.onchange=function(){country.options.length=0;createOption(country,countryArr[provice.value][city.value]);}</script>

JavaScript的三级联动相关推荐

收货地址的JavaScript城市三级联动【干货拿走不谢！＞_＜】
城市三级联动在我们网上购物时会有收货地址一栏让我们选择收货地址,当中有省.市.区等选择项,如下图: 在添加收货地址时我们会先选择省再选市最后选所在区,这些都是下拉列表式的选择,选择完成才会填写具体地 ...
javascript 省市区三级联动附： json数据
html: <label><span>购买地址</span><select name="PurchaseProvince" style=& ...
简单的一个用javascript做的'省市区'三级联动效果
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition ...
JavaScript实现省市区三级联动
JavaScript实现省市区三级联动之前的文章中我们说到过如何利用JavaScript实现二级联动,这次我们来说说如何利用JavaScript实现三级联动.效果如图: HTML代码: 请选择省份: ...
html地区选择js,JavaScript实现省市区三级联动
JavaScript实现省市区三级联动之前的文章中我们说到过如何利用JavaScript实现二级联动,这次我们来说说如何利用JavaScript实现三级联动.效果如图: HTML代码:请选择省份:请 ...
【笔记】Select2 三级联动
- 效果图 - 插件 - jsp页面 <link rel="stylesheet" type="text/css" href="static/p ...
用JavaScript实现动态省市县三级联动
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: <!DOCTYPE ht ...
JavaScript巧用对象的引用解决三级联动
在开发过程中,我们经常会有操作需要进行三级联动操作,比较典型的如:省市区的选择,菜单栏的选择等.当我们遇到这个问题的时候,为了便于开发,我们都是通常使用第三方的插件来实现数据的联动效果.这时候按照联动 ...
javaScript案例——二级联动、三级联动、省市区三级联动
二级联动: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...

JavaScript的三级联动

JavaScript的三级联动相关推荐

最新文章

热门文章