jQuery简单实现省市区三级联动

最新推荐文章于 2021-03-22 19:15:53 发布

君生吖

最新推荐文章于 2021-03-22 19:15:53 发布

阅读量403

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/qq_43273025/article/details/111242191

版权

笔记专栏收录该内容

52 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>

<select id="s1">

</select>
<select id="s2">

</select>
<select id="s3">

</select>

<button id="submit">提交</button>
</body>


<script>
var data = [
    {
        id:0,
        title:"江苏省",
        sub:[
            {
                id:0,
                title:"苏州市",
                sub:[
                    {id:0,title:"吴中区"},
                    {id:1,title:"工业园区"},
                    {id:2,title:"姑苏区"},
                    {id:3,title:"相城区"}
                ]
            },
            {
                id:1,
                title:"南京市",
                sub:[
                    {id:0,title:"玄武区"},
                    {id:1,title:"雨花台区"},
                    {id:2,title:"六合区"},
                    {id:3,title:"建邺区"}
                ]
            }
        ]
    },
    {
        id:1,
        title:"浙江省",
        sub:[
            {
                id:0,
                title:"杭州市",
                sub:[
                    {id:0,title:"余杭区"},
                    {id:1,title:"杭州一区"},
                    {id:2,title:"杭州二"}
                ]
            },
            {
                id:1,
                title:"宁波市",
                sub:[
                    {id:0,title:"宁波一区"},
                    {id:1,title:"宁波二区"}
                ]
            }
        ]
    },
];

var firstSelect;
var secondSelect;
var thirdSelect;

firstSelect=0;
secondSelect=0;
thirdSelect=0;
render("#s1",data);
render("#s2",data[firstSelect].sub);
render("#s3",data[firstSelect].sub[secondSelect].sub);

$("#s1").change(function (){
    firstSelect = $("#s1").val();
    secondSelect=0;
    thirdSelect=0;
    render("#s2",data[firstSelect].sub);
    render("#s3",data[firstSelect].sub[secondSelect].sub);
});

$("#s2").change(function (){
    secondSelect = $("#s2").val();
    thirdSelect=0;
    render("#s3",data[firstSelect].sub[secondSelect].sub);
});

$("#s3").change(function (){
    thirdSelect = $("#s3").val();

});

function render(elementName,data){
    $(elementName).html("");
    data.forEach((item, index) => {
        $(elementName).append("<option value='"+item.id+"'>"+item.title+"</option>")
    });
}

$("#submit").click(function (){
    alert(firstSelect+"-"+secondSelect+"-"+thirdSelect);
});

</script>
</html>

君生吖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery简单实现省市区三级联动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><body><selec
复制链接

扫一扫