返回 省市区联动关系... 登陆

省市区联动关系

不羁 2018-11-24 14:47:07 305
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>作业提示:  三级联动菜单</title>
</head>
<body>
省 <select name="" id="pro"></select>
市 <select name="" id="city"></select>
区 <select name="" id="area"></select>
<p id="addr"></p>
<script src="inc/jquery-3.3.1.js"></script>
<script>
    $(function(){
        $.getJSON('inc/1.json',function(data){
            let option = '<option value="">选择(省)</option>';
            $.each(data,function(i){
                option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
            });
            $('#pro').html(option);
//$(option).appendTo('#pro');

        });

        $('#pro').change(function(){
            //查看当前选择中元素内容
            console.log($(this).find(':selected').text());

            $.getJSON('inc/2.json',function(data){
               let option = '<option value="">选择(市)</option>';
                $.each(data,function(i){
                    if (data[i].proId == $('#pro').val()) {
                        option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
                    }
                });
                $('#city').html(option);
            });
        });
        $('#city').change(function(){
            //查看当前选择中元素内容
            console.log($(this).find(':selected').text());
            $.getJSON('inc/3.json',function(data){
                let option = '<option value="">选择(县区)</option>';
                $.each(data,function(i){
                    if (data[i].cityId == $('#city').val()) {
                        option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
                    }
                });
                $('#area').html(option);
            });
        });

        $('#area').change(function(){
            //查看当前选择中元素内容
            console.log($(this).find(':selected').text());
        });

    })
</script>
</body>
</html>
[{
    "proId": 1,
    "proName": "安徽"
  },
  {
    "proId": 2,
    "proName": "江苏"
  }
]
[
  {
    "cityId": 1,
    "cityName": "合肥",
    "proId":1
  },
  {
    "cityId": 2,
    "cityName": "芜湖",
    "proId":1
  },
  {
    "cityId": 3,
    "cityName": "南京",
    "proId":2
  },
  {
    "cityId": 4,
    "cityName": "苏州",
    "proId":2
  }
]
[
  {
    "areaId": 1,
    "areaName": "包河区",
    "cityId": 1
  },
  {
    "areaId": 2,
    "areaName": "蜀山区",
    "cityId": 1
  },
  {
    "areaId": 3,
    "areaName": "镜湖区",
    "cityId": 2
  },
  {
    "areaId": 4,
    "areaName": "弋江区",
    "cityId": 2
  },
  {
    "areaId": 5,
    "areaName": "玄武区",
    "cityId": 3
  },
  {
    "areaId": 6,
    "areaName": "六合区",
    "cityId": 3
  },
  {
    "areaId": 7,
    "areaName": "吴江区",
    "cityId": 4
  },
  {
    "areaId": 8,
    "areaName": "昆山市",
    "cityId": 4
  }
]

联动关键

data[i].proId == $('#pro').val()

data[i].cityId == $('#city').val()


最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网