用json文件实现城市的二级联动
第一次接触的二级联动是学习php的时候用ajax请求实现城市之间的二级联动;
后来项目接触到这中需求之后,发现我们的后台是Java(新手对Java的后台一窍不通);
所以就想到了用json的来实现,由于项目时间紧,任务重,根本不给我思考的机会(当时写了个json文件是报错的),
那么问题来了;该怎么办呢;突然灵机一动,用数组啊,一级将行政区写死在页面上,二级用change事件查找对应的县,区;
确实是实现了目的;但是代码的不清晰导致了很多问题;
今天有时间,回过头来,想了一会静静,然后就开始改代码;
首先附上json文件
[
{
"p" : "银川市",
"c" : [{"c1":"兴庆区"},{"c1":"金凤区"},{"c1":"西夏区"},{"c1":"中宁县"},{"c1":"灵武市"},{"c1":"贺兰县"}]
},
{
"p" : "石嘴山市",
"c" : [{"c1":"大武口区"},{"c1":"惠农区"},{"c1":"平罗县"}]
},
{
"p" : "吴忠市",
"c" : [{"c1":"利通区"},{"c1":"红寺堡区"},{"c1":"盐池县"},{"c1":"同心县"},{"c1":"青铜峡市"}]
},
{
"p" : "中卫市",
"c" : [{"c1":"沙坡头区"},{"c1":"中宁县"},{"c1":"海原县"}]
},
{
"p" : "固原市",
"c" : [{"c1":"原州区"},{"c1":"泾源县"},{"c1":"西吉县"},{"c1":"隆德县"},{"c1":"彭阳县"}]
}
]
其次附上html和js
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
行政区选项: <select name="" id="city">
<option value='-1'>==请选择==</option>
</select>
</div>
<p>
县市选项: <select name="" id="country">
<option value='-1'>==请选择==</option>
</select>
</p>
<script src="js/jquery-1.11.3.js"></script>
<script>
function TwoLeve(citys,countrys){
}
var ss;
$.getJSON("mydata.json",function(data){
ss=data;
var html="<option value='-1'>==请选择==</option>";
for(var i=0;i<ss.length;i++){
html+="<option value='"+ss[i].p+"'>"+ss[i].p+"</option>";
}
$("#city").html(html);
});
$("#city").change(function(){
var htmls="<option value='-1'>==请选择==</option>";
for(var i=0;i<ss.length;i++){
if($(this).val()==ss[i].p){
var a=ss[i].c;
for(var j=0;j<a.length;j++){
htmls+="<option value='"+a[j].c1+"'>"+a[j].c1+"</option>";
}
$("#country").html(htmls);
}
}
})
</script>
</body>
</html>
