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

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 请问paddlehub能支持移动端开发吗?在Android studio上该如何部署?
  • ¥170 如图所示配置eNSP
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏!微信开发者工具报错,求帮改
  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果