省市县联动的实现。

来源：互联网发布：淘宝阿克苏苹果价格编辑：程序博客网时间：2024/04/28 16:53
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>
0 0