jquery和ajax实现三级地址

最新推荐文章于 2024-07-25 12:41:07 发布

chenchentao00

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量49

点赞数

文章标签： ajax jquery json

本文链接：https://blog.csdn.net/weixin_73854566/article/details/131747617

版权

1.新建json文件存储省市区县信息（名为“province.json”）

{
    "浙江省":{
        "杭州市":["余杭区","西湖区"],
        "金华市":["婺城区","金东区"]
    },
    "陕西省":{
        "西安市":["碑林区","蓝田县"],
        "铜川市":["耀州区","印台区"]
    }
}

2.css样式及网页界面

<style>
        *{
        margin: 0;
        padding: 0;
        list-style:none;
    }
    body{
        background-color: aqua;
    }
    .content{
        width: 300px;
    }
    li{
        height: 43px;
        display: flex;
        line-height: 43px;
        background-color:red;
        border-radius: 14px;
        margin-bottom: 20px;
    }
    .left{
        margin-left: 20px;
    }
    .left::after{
        content: '|';
        color: #fff;
        padding:0 10px;
    }
    .right{
        width:210px;
    }
    select{
        width:100%;
        height: 20px;
        line-height: 20px;
    }
    </style>






<ul class="content">
        <li>
            <div class="left">省会</div>
            <div class="right">
                <select name="province" id="province">
                    <option>请选择</option>
                </select>
            </div>
        </li>
        <li>
            <div class="left">城市</div>
            <div class="right">
                <select name="city" id="city"></select>
            </div>
        </li>
        <li>
            <div class="left">区县</div>
            <div class="right">
                <select name="county" id="county"></select>
            </div>
        </li>
    </ul>

效果图：

3.利用ajax获取信息

<script>
        $(function() {
            $.ajax({
                type:"get",
                url:"province.json",
                async:true,
                dataType:"json",
                success : function (data) {
                    for(var key in data){
                        $("#province").append("<option value="+key+">"+key+"</option>");
                    }
                    $("#province").change(function(){
                        var now_province=$("#province option:selected").val();
                        $("#city").empty();
                        $("#city").append("<option>请选择城市</option>");
                        for(var key in data[now_province]){
                            $("#city").append("<option value="+key+">"+key+"</option>");
                        }
                    $("#city").change(function(){
                        var now_city=$("#city option:selected").val();
                        $("#county").empty();
                        $("#county").append("<option>请选择区县</option>");
                        for(var k in data[now_province][now_city]){
                            $("#county").append("<option value="+data[now_province][now_city][k]+">"+data[now_province][now_city][k]+"</option>");
                        }
                    })
                })
            }
        })
    });  
    </script>

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
        margin: 0;
        padding: 0;
        list-style:none;
    }
    body{
        background-color: aqua;
    }
    .content{
        width: 300px;
    }
    li{
        height: 43px;
        display: flex;
        line-height: 43px;
        background-color:red;
        border-radius: 14px;
        margin-bottom: 20px;
    }
    .left{
        margin-left: 20px;
    }
    .left::after{
        content: '|';
        color: #fff;
        padding:0 10px;
    }
    .right{
        width:210px;
    }
    select{
        width:100%;
        height: 20px;
        line-height: 20px;
    }
    </style>
</head>
<body>
    
    <ul class="content">
        <li>
            <div class="left">省会</div>
            <div class="right">
                <select name="province" id="province">
                    <option>请选择</option>
                </select>
            </div>
        </li>
        <li>
            <div class="left">城市</div>
            <div class="right">
                <select name="city" id="city"></select>
            </div>
        </li>
        <li>
            <div class="left">区县</div>
            <div class="right">
                <select name="county" id="county"></select>
            </div>
        </li>
    </ul>
    <script src="jquery-3.7.0.min.js" type="text/javascript" ></script>
    <script src="province.json"></script>
    <script>
        $(function() {
            $.ajax({
                type:"get",
                url:"province.json",
                async:true,
                dataType:"json",
                success : function (data) {
                    for(var key in data){
                        $("#province").append("<option value="+key+">"+key+"</option>");
                    }
                    $("#province").change(function(){
                        var now_province=$("#province option:selected").val();
                        $("#city").empty();
                        $("#city").append("<option>请选择城市</option>");
                        for(var key in data[now_province]){
                            $("#city").append("<option value="+key+">"+key+"</option>");
                        }
                    $("#city").change(function(){
                        var now_city=$("#city option:selected").val();
                        $("#county").empty();
                        $("#county").append("<option>请选择区县</option>");
                        for(var k in data[now_province][now_city]){
                            $("#county").append("<option value="+data[now_province][now_city][k]+">"+data[now_province][now_city][k]+"</option>");
                        }
                    })
                })
            }
        })
    });  
    </script>
</body>
</html>

运行结果：

思路：使用json文件的形式保存信息，用ajax的get请求方式以获取json文件中的数据。

首先以下拉表单的方式遍历文件中的省会信息，选择完省会后下一级城市菜单输出“请选择城市” ，再以下拉表单的形式遍历所属省会城市信息，选择完城市后下一级菜单输出“请选择区县”，最后再以下拉表单的形式遍历城市所属区县信息。

chenchentao00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery和ajax实现三级地址

首先以下拉表单的方式遍历文件中的省会信息，选择完省会后下一级城市菜单输出“请选择城市” ，再以下拉表单的形式遍历所属省会城市信息，选择完城市后下一级菜单输出“请选择区县”，最后再以下拉表单的形式遍历城市所属区县信息。思路：使用json文件的形式保存信息，用ajax的get请求方式以获取json文件中的数据。1.新建json文件存储省市区县信息（名为“province.json”）2.css样式及网页界面。3.利用ajax获取信息。
复制链接

扫一扫