【案例】城市地址三级联动

注意点：

1、<option value=""></option> value值的设置

2、select的onchange事件

<!DOCTYPE html>

<head>

<title>城市地址三级联动</title>

<style>

margin:0;

padding:0;

}

#pro,#city,#county{

width: 120px;

height: 30px;

margin-left: 10px;

margin-top: 20px;

}

#city,#county{

display: none;

}

</style>

</head>

<body>

</body>

//获取元素

var pro = document.getElementById('pro');

var city = document.getElementById('city');

var county = document.getElementById('county');

var proStr = '<option value="">请选择</option>';

for(var i in address[0]){

proStr += '<option value="0,'+ i +'">'+ address[0][i] +'</option>';

}

pro.innerHTML = proStr;

//省发生改变时，显示相应的市

pro.onchange = function(){

city.style.display = 'inline-block';

var cityStr = '<option value="">请选择</option>';

var index = this.value;

if(index == ''){

city.style.display = 'none';

county.style.display = 'none';

return;

}

for(var i in address[index]){

cityStr += '<option value="'+ index +','+ i +'">'+ address[index][i] +'</option>';

}

city.innerHTML = cityStr;

}

//市发生改变时，显示相应的县

city.onchange = function(){

county.style.display = 'inline-block';

var countyStr = '<option value="">请选择</option>';

var index = this.value;

if(index == ''){

county.style.display = 'none';

return;

}

for(var i in address[index]){

countyStr += '<option value="">'+ address[index][i] +'</option>';

}

county.innerHTML = countyStr;

}

</script>

</html>

转载于:https://www.cnblogs.com/sherryStudy/p/city_address3.html

【案例】城市地址三级联动相关推荐

weui实现移动端地址三级联动，基于js
主要方法 weui.picker(array,{defaultValue: [],//对应选项的值onChange: function (result) {console.log(result)},o ...
vue引用自定义.js文件（常量抛出 + 地址三级联动为例）- 语法篇
文章目录 vue如何引用`自定义封装的` `.js`文件? `如何操作,详细如下.`(注意代码注释部分:注意1/2/3/4/5) 一.效果图预览: 二.以自定义`area.min.js`文件为例: 三 ...
原生JavaScript实现城市二级三级联动
原生JavaScript实现城市二级三级联动一,HTML代码 <select id="province" onchange="chooseProvince(th ...
省份城市区县三级联动html代码,JavaScript实现省份城市的三级联动
本文实例为大家分享了js实现省份城市的三级联动的具体代码,供大家参考,具体内容如下效果图: Document select{ width: 80px; margin: 5px; } // 省份数组 ...
android studio 测试地址三级联动的时候 json数据太长提示错误: 常量字符串过长
在项目中应用地址三级联动的时候因为测试给了一大窜的json数据就在项目中创建了一个常量保存这个json 然后在专程bean 去应用但是提示错误: 常量字符串过长于是该用jso ...
ios收货地址三级联动选择
这次的需求,是省市区三级联动选择,并且市的选择要根据省的id,然后区的选择要根据市的id 每次都要进行网络请求,关键代码,其实是 //监听轮子的移动 - (void)pickerView:(UIPic ...
原生js封装picker地址三级联动方法
地址三联动电商平台等需要用户填写地址的应用都需要用到这个插件:网上也有很多这样的插件:但是项目中使用难免有需要改动的地方:所以自己封装的才是最匹配的: //地址选择器 /**** @param {f ...
仿京东收货地址三级联动
声明我没有用tabLayout(pageSlidingTabStrip) + viewpager + fragment 如果用上面的方法实现更加简单我用的是一个listvi ...
uni-app的地址三级联动
1.template样式 <view class="wrap" type="text" ><view class="region&q ...

【案例】城市地址三级联动

【案例】城市地址三级联动相关推荐

最新文章

热门文章