市县两级select框联动

1.使用jquery框架简化ajax请求，懒的写XMLHttpRequest源生js

2.实现为二级Object，见city.json文件

 

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,
    minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src="lib/jquery-2.1.4.min.js"></script>
    <title>ES5CMP</title>
</head>
<body>

<div>
    市: <select name="a" id="a"></select>
</div>
<div>
    区: <select name="b" id="b"></select>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        var cityList;
        $.ajax({
            url:"city.json",
            type:"get"
        }).success(function(data){
            cityList=data;
            $("#a").append("<option></option>");
            $("#b").append("<option></option>");
            for(var i= 0,j=cityList.length;i<j;i++){
                $("#a").append("<option>"+cityList[i].city+"</option>");
            }
            $("#a").change(function(e){
                var changgedCity=this.value;
                $("#b").empty();
                $("#b").append("<option></option>");
                for(var i= 0,j=cityList.length;i<j;i++){
                    if(cityList[i].city==changgedCity){
                        for(var m= 0,n=cityList[i].country.length;m<n;m++){
                            $("#b").append("<option>"+cityList[i].country[m].name+"</option>");
                        }
                    }
                }
            });
        })
    });
</script>
</html>

　　city.json:

[
  {
    "city":"beijing",
    "country":[
      {
        "name":"haidian"
      },
      {
        "name":"chaoyang"
      }
    ]
  },
  {
    "city":"shanghai",
    "country":[
      {
        "name":"pudong"
      },
      {
        "name":"xuhui"
      },
      {
        "name":"jingan"
      }
    ]
  }
]

　　全国的city.json库需要完善，三级联动的“省-市-县”需要多添加一层循环，city.json也需要按照解构添加

posted on 2016-08-24 15:40  carlyin  阅读(271)  评论(0)    收藏  举报

导航