html 多级联动 省市区

用的xadmin模板，v2.2
xadmin模板下载

                             <div class="layui-form-item x-city" id="start">
                              <label class="layui-form-label">城市联动</label>
                              <div class="layui-input-inline">
                                <select name="province" lay-filter="province">
                                  <option value="">请选择省</option>
                                </select>
                              </div>
                              <div class="layui-input-inline">
                                <select name="city" lay-filter="city">
                                  <option value="">请选择市</option>
                                </select>
                              </div>
                              <div class="layui-input-inline">
                                <select name="area" lay-filter="area">
                                  <option value="">请选择县/区</option>
                                </select>
                              </div>
                            </div> 
/* */   
        <script type="text/javascript" src="./js/city.js"></script>
        <script>
          layui.use(['form','code'], function(){
   
            form = layui.form;

            layui.code();

            $('#start').xcity();
            
            $('#end').xcity('广东','广州市','东山区');

          });
        </script>                     

说明

<pre class="layui-code" lay-title="JavaScript" lay-skin="notepad">
    //xcity城市插件 基于于jquery与layui form 模块，使用之前先确认这两者是否引入 
    //插件文件为 xcity.js,引入
    id所有标签需要有class x-city  id没有根据自己需要定义
    select lay-filter 属性值 为必须 "province/city/area"
    //初始化
    $('#x-city').xcity();
    //传默认值 
    $('#x-city').xcity('广东','广州市','东山区');
</pre>

xcity.js

$.fn.xcity = function(pName,cName,aName){
   

    this.p = $(this).find('select[lay-filter=province]');

    this.c = $(this).find('select[lay-filter=city]');

    this.a = $(this).find('select[lay-filter=area]');

    this.cityList = [];

    this.reaList = [];

    this.showP  = function(provinceList) {
   

        this.p.html('');

        is_pName = false;
        
        for (var i in provinceList) {
   
            
            if(pName==provinceList[i].name){
   
                is_pName = true;
                this.cityList = provinceList[i].cityList;
                this.p.append("<option selected value='"+provinceList[i].name+"'>"+provinceList[i].name+"</option>")
            }else{
   
                this.p.append("<option value='"+provinceList[i].name+"'>"+provinceList[i].name+"</option>")
            }
        }
        if(!is_pName){
   
            this.cityList = provinceList[0].cityList;
        }
        
    }

    this.showC = function (cityList) {
   

        this.c.html('');

        is_cName = false;

        for (var i in cityList) {
   
            if(cName==cityList[i].name){
   
                is_cName = true;
                this.areaList = cityList[i].areaList;
                this.c.append("<option selected value='"+cityList[i].name+"'>"+cityList[i].name+"</option>")
            }else{
   
                this.c.append("<option value='"+cityList[i].name+"'>"+cityList[i].name+"</option>")
            }
        }

        if(!is_cName){
   
            this.areaList = cityList[0].areaList;
        }
    }

    this.showA = function (areaList) {
   
        this.a.html('');

        for (var i in areaList) {
   
            
            if(aName==areaList[i]){
   
                this.a.append("<option selected value='"+areaList[i]+"'>"+areaList[i]+"</option>")
            }else{
   
                this.a.append("<option value='"+areaList[i]+"'>"+areaList[i]+"</option>")
            }
        }
    }

    this.showP(provinceList);
    this.showC(this.cityList);
    this.showA(this.areaList);

    form.render('select');

    form.on('select(province)', function(data){
   
        var pName = data.value;
        $(data.elem).parents(".x-city").xcity(pName);
    });

    form.on('select(city)', function(data){
   
        var cName = data.value;
        var pName = $(data.elem).parents(".x-city").find('select[lay-filter=province]').val();
        console.log(pName);
        $(data.elem).parents(".x-city").xcity(pName,cName);
    });

    return this;
}
var provinceList = [
{
   name:'北京', cityList:[		   
{
   name:'市辖区', areaList:['东城区','西城区','崇文区','宣武区','朝阳区','丰台区','石景山区','海淀区','门头沟区','房山区','通州区','顺义区','昌平区','大兴区','怀柔区','平谷区']},		   
{
   name:'县', areaList:['密云县','延庆县']}
]},
{
   name:'上海', cityList:[		   
{
   name:'市辖区', areaList:['黄浦区','卢湾区','徐汇区','长宁区','静安区','普陀区','闸北区','虹口区','杨浦区','闵行区','宝山区','嘉定区','浦东新区','金山区','松江区','青浦区','南汇区','奉贤区']},		   
{
   name:'县', areaList:['崇明县']}
]},
{
   name:'天津', cityList:[		   
{
   name:'市辖区', areaList:['和平区','河东区','河西区','南开区','河北区','红桥区','塘沽区','汉沽区','大港区','东丽区','西青区','津南区','北辰区','武清区','宝坻区']},		   
{
   name:'县', areaList:['宁河县','静海县','蓟　县']}
]},
{
   name:'重庆', cityList:[		   
{
   name:'市辖区', areaList:['万州区','涪陵区','渝中区','大渡口区','江北区','沙坪坝区','九龙坡区','南岸区','北碚区','万盛区','双桥区','渝北区','巴南区','黔江区','长寿区']},		   
{
   name:'县', areaList:['綦江县','潼南县','铜梁县','大足县','荣昌县','璧山县','梁平县','城口县','丰都县','垫江县','武隆县','忠　县','开　县','云阳县','奉节县','巫山县','巫溪县','石柱土家族自治县','秀山土家族苗族自治县','酉阳土家族苗族自治县','彭水苗族土家族自治县']},		   
{
   name:'市', areaList:['江津市','合川市','永川市','南川市']}
]},
{
   name:'四川', cityList:[		   
{
   name:'成都市', areaList:['市辖区','锦江区','青羊区','金牛区','武侯区','成华区','龙泉驿区','青白江区','新都区','温江县','金堂县','双流县','郫　县','大邑县','蒲江县','新津县','都江堰市','彭州市','邛崃市','崇州市']},		   
{
   name:'自贡市', areaList:['市辖区','自流井区','贡井区','大安区','沿滩区','荣　县','富顺县']},		   
{
   name:'攀枝花市', areaList:['市辖区','东　区','西　区','仁和区','米易县','盐边县']},		   
{
   name:'泸州市', areaList:['市辖区','江阳区','纳溪区','龙马潭区','泸　县','合江县','叙永县','古蔺县']},		   
{
   name:'德阳市', areaList:['市辖区','旌阳区','中江县','罗江县','广汉市','什邡市','绵竹市']},		   
{
   name:'绵阳市', areaList:['市辖区','涪城区','游仙区','三台县','盐亭县','安　县','梓潼县','北川羌族自治县','平武县','江油市']},		   
{
   name:'广元市', areaList:['市辖区','市中区','元坝区','朝天区','旺苍县','青川县','剑阁县','苍溪县']},		   
{
   name:'遂宁市', areaList:['市辖区','船山区','安居区','蓬溪县','射洪县','大英县']},		   
{
   name:'内江市', areaList:['市辖区','市中区','东兴区','威远县','资中县','隆昌县']},		   
{
   name:'乐山市', areaList:['市辖区','市中区','沙湾区','五通桥区','金口河区','犍为县','井研县','夹江县','沐川县','峨边彝族自治县','马边彝族自治县','峨眉山市']},		   
{
   name:'南充市', areaList:['市辖区','顺庆区','高坪区','嘉陵区','南部县','营山县','蓬安县','仪陇县','西充县','阆中市']},		   
{
   name:'眉山市', areaList:['市辖区','东坡区','仁寿县','彭山县','洪雅县','丹棱县','青神县']},		   
{
   name:'宜宾市', areaList:['市辖区','翠屏区','宜宾县','南溪县','江安县','长宁县','高　县','珙　县','筠连县','兴文县','屏山县']},		   
{
   name:'广安市', areaList:['市辖区','广安区','岳池县','武胜县','邻水县','华莹市']},		   
{
   name:'达州市', areaList:['市辖区','通川区','达　县','宣汉县','开江县','大竹县','渠　县','万源市']},		   
{
   name:'雅安市', areaList:['市辖区','雨城区','名山县','荥经县','汉源县','石棉县','天全县','芦山县','宝兴县']},		   
{
   name:'巴中市', areaList:['市辖区','巴州区','通江县','南江县','平昌县']},		   
{
   name:'资阳市', areaList:['市辖区','雁江区','安岳县','乐至县','简阳市']},		   
{
   name:'阿坝藏族羌族自治州', areaList:['汶川县','理　县','茂　县','松潘县','九寨沟县','金川县','小金县','黑水县','马尔康县','壤塘县','阿坝县','若尔盖县','红原县']},		   
{
   name:'甘孜藏族自治州', areaList:['康定县','泸定县','丹巴县','九龙县','雅江县','道孚县','炉霍县','甘孜县','新龙县','德格县','白玉县','石渠县','色达县','理塘县','巴塘县','乡城县','稻城县','得荣县']},		   
{
   name:'凉山彝族自治州', areaList:['西昌市','木里藏族自治县','盐源县','德昌县','会理县','会东县','宁南县','普格县','布拖县','金阳县','昭觉县','喜德县','冕宁县','越西县','甘洛县','美姑县','雷波县']}
]},
{
   name:'贵州', cityList:[		   
{
   name:'贵阳市', areaList:['市辖区','南明区','云岩区','花溪区','乌当区','白云区','小河区','开阳县','息烽县','修文县','清镇市']},		   
{
   name:'六盘水市', areaList:['钟山区','六枝特区','水城县','盘　县']},		   
{
   name:'遵义市', areaList:['市辖区','红花岗区','汇川区','遵义县','桐梓县','绥阳县','正安县','道真仡佬族苗族自治县','务川仡佬族苗族自治县','凤冈县','湄潭县','余庆县','习水县','赤水市','仁怀市']},		   
{
   name:'安顺市', areaList:['市辖区','西秀区','平坝县','普定县','镇宁布依族苗族自治县','关岭布依族苗族自治县','紫云苗族布依族自治县']},		   
{
   name:'铜仁地区', areaList:['铜仁市','江口县','玉屏侗族自治县','石阡县','思南县','印江土家族苗族自治县','德江县','沿河土家族自治县','松桃苗族自治县','万山特区']},		   
{
   name:'黔西南布依族苗族自治州', areaList:['兴义市','兴仁县','普安县','晴隆县','贞丰县','望谟县','册亨县','安龙县']},		   
{
   name:'毕节地区', areaList:['毕节市','大方县','黔西县','金沙县','织金县','纳雍县','威宁彝族回族苗族自治县','赫章县']},		   
{
   name:'黔东南苗族侗族自治州', areaList:['凯里市','黄平县','施秉县','三穗县','镇远县','岑巩县','天柱县','锦屏县','剑河县','台江县','黎平县','榕江县','从江县','雷山县','麻江县','丹寨县']},		   
{
   name:'黔南布依族苗族自治州', areaList:['都匀市','福泉市','荔波县','贵定县','瓮安县','独山县','平塘县','罗甸县','长顺县','龙里县','惠水县','三都水族自治县']}
]},
{
   name:'云南', cityList:[		   
{
   name:'昆明市', areaList:['市辖区','五华区','盘龙区','官渡区','西山区','东川区','呈贡县','晋宁县','富民县','宜良县','石林彝族自治县','嵩明县','禄劝彝族苗族自治县','寻甸回族彝族自治县','安宁市']},		   
{
   name:'曲靖市', areaList:['市辖区','麒麟区','马龙县','陆良县','师宗县','罗平县','富源县','会泽县','沾益县','宣威市']},		   
{
   name:'玉溪市', areaList:['市辖区','红塔区','江川县','澄江县','通海县','华宁县','易门县','峨山彝族自治县','新平彝族傣族自治县','元江哈尼族彝族傣族自治县']},		   
{
   name:'保山市', areaList:['市辖区','隆阳区','施甸县','腾冲县','龙陵县','昌宁县']},		   
{
   name:'昭通市', areaList:['市辖区','昭阳区','鲁甸县','巧家县','盐津县','大关县','永善县','绥江县','镇雄县','彝良县','威信县','水富县']},		   
{
   name:'丽江市', areaList:['市辖区','古城区','玉龙纳西族自治县','永胜县','华坪县','宁蒗彝族自治县']},		   
{
   name:'思茅市', areaList:['市辖区','翠云区','普洱哈尼族彝族自治县','墨江哈尼族自治县','景东彝族自治县','景谷傣族彝族自治县','镇沅彝族哈尼族拉祜族自治县','江城哈尼族彝族自治县','孟连傣族拉祜族佤族自治县','澜沧拉祜族自治县','西盟佤族自治县']},