城市列表联动
Posted xuaima
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了城市列表联动相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于城市列表联动的主要内容，如果未能解决你的问题，请参考以下文章
Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化