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

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 C++对比不同编码下相同字符串
  • ¥15 pyqt5设计界面控件之间的空白想消除
  • ¥15 想请教大家关于机器学习的问题
  • ¥15 虚幻UE保存Actor位置失败
  • ¥15 多个.nii合并为.nii.gz格式
  • ¥50 现在需要统计2023年全年 “签收时间(qssj)” 到 “提交时间(tjsj)” 小于半小时的业务量,但是要排除掉周末的时间,同时还要排除中午休息的时间。
  • ¥50 opencv模板匹配为何图像差别大仍然匹配数值高?
  • ¥15 如何成功完成主菜单和分菜单的代码编程C++
  • ¥15 怎样采集或者其它途径拿到全国最新个体工商户数据
  • ¥20 我是一名大学生,想学习java是自学还是报培训班呢