Ark_Scorpion 2022-05-05 16:44 采纳率: 55.2%
浏览 261
已结题

HTML使用AJAX获取Area.json数据实现省市县三级联动选择

使用AJAX获取Area.json数据实现省市县三级联动选择

这是我看了网上的代码,但是运行后有点问题,求指点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jquery-3.6.0.js"></script>
    <script>
        $(function () {
$.ajax({
            url:"city.json",
            type:"get",
            dataType:"json",
            success:function (data) {
                for(var key in data){
                    $("#provice").append("<option value="+key+">"+key+"</option>");
                }
                $("#provice").change(function () {
                    var now_provice=$("#provice option:selected").val();
                    $("#city").empty();
                    $("#city").append("<option >请输入城市</option>");
                    for(var key in data[now_provice]){
                        $("#city").append("<option value="+key+">"+key+"</option>");
                    }
                    $("#city").change(function () {
                        var now_city=$("#city option:selected").val();
                        $("#area").empty();
                        $("#area").append("<option >请输入地区</option>");
                        for(var k in data[now_provice][now_city]){
                            $("#area").append("<option value="+data[now_provice][now_city][k]+">"+data[now_provice][now_city][k]+"</option>");
                        }
                    })
                })
            }
        })       
     });
    </script>
    <title>Document</title>
</head>
<body>
    <div>
        <label>家庭住址:</label>
    <select id="provice">
        <option>请选择省份</option>
    </select>
        <select id="city">
            <option>请选择城市</option>
        </select>
        <select id="area">
            <option>请选择地区</option>
        </select>
    </div>
</body>
</html>

json文件有点长就不放了,大致是这个样子

img

img


我没有解释清楚,上图是我在调控的时候看到的错误,然后我还有一个问题是为什么我网页里的下拉框里面没有显示出东西,我该怎么修改才行

  • 写回答

1条回答 默认 最新

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 5月12日
  • 已采纳回答 5月12日
  • 修改了问题 5月5日
  • 创建了问题 5月5日

悬赏问题

  • ¥15 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)
  • ¥15 Windows11, backspace, enter, space键失灵