省市县联动的实现。

最新推荐文章于 2023-01-14 20:29:59 发布

MelodyFreedom

最新推荐文章于 2023-01-14 20:29:59 发布

阅读量410

点赞数

本文链接：https://blog.csdn.net/MelodyFreedom/article/details/52223603

版权

1、在html中引入jquery.js文件和address.js文件（我的下载中有），写入如下代码。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select{
            width:200px;
        }
    </style>
    <script src="./address.js"></script>
    <script src="./jquery-1.8.3.min.js"></script>
</head>
<body>

<div>
    <label>省份</label><select class="provice"></select>
</div>
<div>
    <label>市区</label><select class="city"></select>
</div>
<div>
    <label>县</label><select class="distance"></select>
</div>
<script>
    var provice=document.getElementsByClassName('provice');
    var city=document.getElementsByClassName('city');
    var distance=document.getElementsByClassName('distance');
    window.onload = function(){
        console.info('2344');
        setAreaSelect($(provice),$(city),$(distance));
    };

    //省市县三级联动下拉框
    function setAreaSelect(provinceSelect, citySelect, countySelect){
        var provDef = '<option value="">请选择省份</option>',
                cityDef = '<option value="">请选择市区</option>',
                countyDef = '<option value="">请选择区县</option>';
        var addrJson = addr;
        var getOpt = function (pId){
            var optStr = "";
            for (var i = 0, addrJsonLen = addrJson.length; i < addrJsonLen; i++){
                var iData = addrJson[i];
                optStr += iData.parentid == pId ? '<option value="' + iData.addrid + '">' + iData.name + '</option>' : '';
            }
            return optStr;
        };
        var getProvince = function (){return  provDef + getOpt("1")};
        var getCity = function (proId){return  cityDef + getOpt(proId)};
        var getCounty = function (cityId){return countyDef + getOpt(cityId)};

        provinceSelect.html(getProvince());
        provinceSelect.on('change' ,function (){
            citySelect.html(cityDef);
            var _pId = $(this).val();
            _pId != "" ? citySelect.html(getCity(_pId)) : '';
            citySelect.change();
        });
        citySelect.on('change' ,function (){
            countySelect.html(countyDef);
            var _cId = $(this).val();
            _cId != "" ? countySelect.html(getCounty(_cId)) : '';
            countySelect.change();
        });
    }

</script>

</body>
</html>