码迷,mamicode.com
首页 > 其他好文 > 详细

城市列表联动

时间:2019-03-05 21:33:22      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:title   武汉   pen   城市   utf-8   txt   ext   val   create   

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
var arr=[["武汉","黄冈","襄阳","小米"],["长沙","韶山","岳阳楼","张家界"],["商丘","郑州","南阳","信阳"]]
$(function(){
var city=new Array(3);
city[0]=new Array("武汉","黄冈","襄阳","小米");
city[1]=new Array("长沙","韶山","岳阳楼","张家界");
city[2]=new Array("石家庄","唐山","保定","廊坊");
city[3]=new Array("商丘","郑州","南阳","信阳");
$("#province").change(function(){
$("#city").empty();
var val=this.value;
console.log(val);
$.each(city,function(i,n){
if(val==i){
$.each(city[i],function(j,m){
var txt=document.createTextNode(m);
var op=document.createElement("option");
$(op).append(txt);
$(op).appendTo("#city")
});
}
});
});
});
</script>
</head>
<body>
<select id="province">
<option>===请选择===</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
<option>===请选择===</option>
</select>
</body>
</html>

城市列表联动

标签:title   武汉   pen   城市   utf-8   txt   ext   val   create   

原文地址:https://www.cnblogs.com/xuaima/p/10479469.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!