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 使用MATLAB进行余弦相似度计算加速
  • ¥15 服务器安装php5.6版本
  • ¥15 我想用51单片机和数码管做一个从0开始的计数表 我写了一串代码 但是放到单片机里面数码管只闪烁一下然后熄灭
  • ¥20 系统工程中,状态空间模型中状态方程的应用。请猛男来完整讲一下下面所有问题
  • ¥15 我想在WPF的Model Code中获取ViewModel Code中的一个参数
  • ¥15 arcgis处理土地利用道路 建筑 林地分类
  • ¥20 使用visual studio 工具用C++语音,调用openslsx库读取excel文件的sheet问题
  • ¥100 寻会做云闪付tn转h5支付链接的技术
  • ¥15 DockerSwarm跨节点无法访问问题
  • ¥15 使用dify通过OpenAI 的API keys添加OpenAI模型时报了“Connection Error”错误