jquery实现省市县（区）三级联动

最新推荐文章于 2021-09-07 11:20:46 发布

八佾舞于庭

最新推荐文章于 2021-09-07 11:20:46 发布

阅读量1.1k

点赞数

分类专栏： javascript+jquery 文章标签：省市区三级联动 jquery ajax

本文链接：https://blog.csdn.net/D_claus/article/details/83035839

版权

javascript+jquery 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

直接上代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #container{
        width: 500px;
        min-height: 300px;
        background-color: lightgreen;
        margin: auto;
        text-align: center;
        padding: 10px;
    }
    </style>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        // 公用方法
        function queryData(obj,callback){
            $.ajax({
                type:'get',
                url:'http://localhost/summary/select.php',//数据地址
                data:obj,
                dataType:'json',
                success:function(data){
                    callback(data);
                }
            });
        }
        // 加载省级数据
        queryData({
            flag:1
        },function(data){
            var option = '';
            $.each(data,function(i,e){
                option += '<option value="'+e.id+'">'+e.province+'</option>';
            });
            $("#province").append(option);
        });

        $('#province').change(function(){
            // $("#city").find('option:gt(0)').remove();
            $("#city option:gt(0)").remove();
            queryData({
                flag:2,
                pId:$(this).val()
            },function(data){
                var option = '';
                $.each(data,function(i,e){
                    option += '<option value="'+e.id+'">'+e.city+'</option>';
                });
                $("#city").append(option);
            });
        });

        $('#city').change(function(){
            // $("#city").find('option:gt(0)').remove();
            $("#county option:gt(0)").remove();
            queryData({
                flag:3,
                cId:$(this).val()
            },function(data){
                var option = '';
                $.each(data,function(i,e){
                    option += '<option value="'+e.id+'">'+e.county+'</option>';
                });
                $("#county").append(option);
            });
        });

    });
    </script>
</head>
<body>
    <div id="container">
        <label>
            省：<select id="province">
                <option>请选择省...</option>
            </select>
        </label>
        <label>
            市：<select id="city">
                <option>请选择市...</option>
            </select>
        </label>
        <label>
            县：<select id="county">
                <option>请选择县...</option>
            </select>
        </label>
    </div>
</body>
</html>

八佾舞于庭

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现省市县（区）三级联动

直接上代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&
复制链接

扫一扫