用json文件实现城市的二级联动

最新推荐文章于 2023-06-19 09:20:03 发布

b68741879732809

最新推荐文章于 2023-06-19 09:20:03 发布

阅读量226

点赞数

文章标签： json php java

原文链接：http://www.cnblogs.com/fishMu/p/5627952.html

版权

第一次接触的二级联动是学习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>