标签：province city country 城市 value createOption 联动 var 三级
<!DOCTYPE html>
<html>
<head>
<title>城市三级联动</title>
<style>
h1{
color:#8B0000;
text-align:center;
}
div{
width:100%;
text-align:center;
}
</style>
</head>
<body>
<h1>城市三级联动</h1>
<div>
<select id="province">
<option value="-1">--请选择--</option>
</select>
<select id="city"><option>--请选择--</option></select>
<select id="country"><option>--请选择--</option></select>
</div>
<script type="text/javascript">
var provinceArr = ['上海','湖南','江苏'];
var cityArr = [
['上海市'],
['长沙市','岳阳市','株洲市','湘潭市','邵阳市'],
['苏州市','南京市','扬州市','盐城市']]
var countryArr = [
[['黄浦区','静安区','长宁区','浦东区']
],[
['芙蓉区','岳麓区','天心区','开福区','雨花区','望城区'],
['岳阳楼区','云溪区','岳阳县','华容县','湘阴县','平江县'],
['天元区','芦淞区','荷塘区','石峰区','渌口区'],
['雨湖区','岳塘区','湘潭县','韶山市','湘乡区'],
['洞口县','隆回县','绥宁县','邵阳县','邵东县']
],[
['虎丘区','吴中区','相城区','姑苏区','吴江区'],
['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
['邗江区','广陵区','江都区'],
['盐都区','亭湖区','大丰区','响水县','滨海县']
]];
//为select添加option
function createOption(obj,data){ //obj表示下拉列表的名字;data表示数组(一个下拉菜单里所有值组成的数组)
for(var i in data){ //循环数组
var op = new Option(data[i],i); //<option value="i">data[i]</option>
obj.options.add(op); //添加option(即下拉列选项)
}
}
var province = document.getElementById('province'); //获得ID为'province'的select元素
createOption(province,provinceArr); //调用函数createOption()
var city = document.getElementById("city");
province.onchange = function(){
city.options.length = 0;
createOption(city,cityArr[province.value]);
};
var country = document.getElementById("country");
city.onchange = function(){
country.options.length = 0;
createOption(country,countryArr[province.value][city.value]);
};
province.onchange = function(){
city.options.length = 0;
createOption(city,cityArr[province.value]);
if(province.value >= 0){
city.onchange();
}else{
country.options.length = 0;
}
};
</script>
</body>
</html>
标签：province,city,country,城市,value,createOption,联动,var,三级 来源： https://www.cnblogs.com/shu-xi/p/11695696.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。