js、jquery实现省市县三级联动下拉框的功能

这篇文章主要为大家详细介绍使用原生js、或jquery来实现省市县三级联动下拉框的功能。具有一定的参考价值，感兴趣的小伙伴们可以参考一下

原生js的实现

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<select>
    <option>---请选择省---</option>
</select>
<select>
    <option>---请选择市---</option>
</select>
<select>
    <option>请选择县</option>
</select>

<script type="text/javascript">
    var proArr = ["安徽","河南","河北","江苏"];
    var cityArr = [
        ["合肥","蚌埠","亳州","阜阳"],
        ["郑州","开封","商丘","焦作"],
        ["石家庄","邯郸","衡水"],
        ["苏州","杭州","无锡","南京"]
    ]
    var couArr = [
        [
            ["合县1","合县2","合县3","合县4"],
            ["蚌县1","蚌县2","蚌县3","蚌县4"],
            ["亳县1","亳县2","亳县3","亳县4"],
            ["阜县1","阜县2","阜县3","阜县4"],
        ],
        [
            ["郑县1","郑县2","郑县3","郑县4"],
            ["开县1","开县2","开县3","开县4"],
            ["商县1","商县2","商县3","商县4"],
            ["焦县1","焦县2","焦县3","焦县4"],
        ],
        [
            ["石县1","石县2","石县3","石县4"],
            ["邯县1","邯县2","邯县3","邯县4"],
            ["衡县1","衡县2","衡县3","衡县4"],
        ],
        [
            ["苏县1","苏县2","苏县3","苏县4"],
            ["杭县1","杭县2","杭县3","杭县4"],
            ["无县1","无县2","无县3","无县4"],
            ["南县1","南县2","南县3","南县4"],
        ],
    ]
    var sltNope = document.getElementsByTagName("select");
    var Index1 = 0;
    createNope(proArr,0);
    sltNope[0].onchange = function(){
        sltNope[1].length = 1;
        sltNope[2].length = 1;
        Index = this.selectedIndex-1;
        createNope(cityArr[Index],1);
    }
    sltNope[1].onchange = function(){
        sltNope[2].length = 1;
        createNope(couArr[Index][this.selectedIndex-1],2);
    }    
    function createNope(Arr,sum){
        for (x = 0;x<Arr.length;x++) {
            var topy = document.createElement('option');
            topy.innerHTML = Arr[x];
            sltNope[sum].appendChild(topy);
        }
    }
</script>
</body>
</html>

jquery的实现

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
</head>
<body>
<select>
    <option>---请选择省---</option>
</select>
<select>
    <option>---请选择市---</option>
</select>
<select>
    <option>请选择县</option>
</select>

<script type="text/javascript">
    var proArr = ["安徽","河南","河北","江苏"];
    var cityArr = [
        ["合肥","蚌埠","亳州","阜阳"],
        ["郑州","开封","商丘","焦作"],
        ["石家庄","邯郸","衡水"],
        ["苏州","杭州","无锡","南京"]
    ]
    var couArr = [
        [
            ["合县1","合县2","合县3","合县4"],
            ["蚌县1","蚌县2","蚌县3","蚌县4"],
            ["亳县1","亳县2","亳县3","亳县4"],
            ["阜县1","阜县2","阜县3","阜县4"],
        ],
        [
            ["郑县1","郑县2","郑县3","郑县4"],
            ["开县1","开县2","开县3","开县4"],
            ["商县1","商县2","商县3","商县4"],
            ["焦县1","焦县2","焦县3","焦县4"],
        ],
        [
            ["石县1","石县2","石县3","石县4"],
            ["邯县1","邯县2","邯县3","邯县4"],
            ["衡县1","衡县2","衡县3","衡县4"],
        ],
        [
            ["苏县1","苏县2","苏县3","苏县4"],
            ["杭县1","杭县2","杭县3","杭县4"],
            ["无县1","无县2","无县3","无县4"],
            ["南县1","南县2","南县3","南县4"],
        ],
    ]
    createNope(proArr,0);
    $("select")[0].onchange = function(){
        $("select")[1].length = 1;
        $("select")[2].length = 1;
        Index = this.selectedIndex-1;
        createNope(cityArr[Index],1);
    }
    $("select")[1].onchange = function(){
        $("select")[2].length = 1;
        createNope(couArr[Index][this.selectedIndex-1],2);
    }
    function createNope(Arr,sum){
        $.each(Arr,function(index,value){
            $("select").eq(sum).append("<option>"+value+"</option>");
        })
    }
</script>
</body>
</html>

jquery的插件实现：

distpicker是一款可以实现中国省市区地址三级联动jQuery插件。它使用简单，简单设置即可完成中国省市区地址联动效果。

链接: https://www.fly63.com/article/detial/988