中国地区三级联动菜单(纯js制作)

第一步:在网页中写入如下代码:

<!DOCTYPE html> <!--次行代表使用的是html5,如果不支持请换成html4-->

<html>

<head>

<title>三级联动菜单</title><br>

<script src="style/jsAddress.js"></script> <!--需要和js文件在同一目录下-->

</head>

<body>

<!--第一种设置有默认值-->

省:<select id="cmbProvince"></select>

市:<select id="cmbCity"></select>

区:<select id="cmbArea"></select>

<br /><br />

<!--第二种无默认值,地区内容无显示-->

省:<select id="Select1"></select>

市:<select id="Select2"></select>

区:<select id="Select3"></select>

<script type="text/javascript">

addressInit(‘cmbProvince‘, ‘cmbCity‘, ‘cmbArea‘, ‘河南省‘, ‘郑州市‘, ‘金水区‘);

addressInit(‘Select1‘, ‘Select2‘, ‘Select3‘);

</script>

</body>

</html>

第二步:创建js文件jsAddress.js

//写入js文件内容:

var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, defaultProvince, defaultCity, defaultArea)

{

var cmbProvince = document.getElementById(_cmbProvince);

var cmbCity = document.getElementById(_cmbCity);

var cmbArea = document.getElementById(_cmbArea);

function cmbSelect(cmb, str)

{

for(var i=0; i<cmb.options.length; i++)

{

if(cmb.options[i].value == str)

{

cmb.selectedIndex = i;

return;

}

}

}

function cmbAddOption(cmb, str, obj)

{

var option = document.createElement("OPTION");

cmb.options.add(option);

option.innerHTML = str;

option.value = str;

option.obj = obj;

}

function changeCity()

{

cmbArea.options.length = 0;

if(cmbCity.selectedIndex == -1)return;

var item = cmbCity.options[cmbCity.selectedIndex].obj;

for(var i=0; i<item.areaList.length; i++)

{

cmbAddOption(cmbArea, item.areaList[i], null);

}

cmbSelect(cmbArea, defaultArea);

}

function changeProvince()

{

cmbCity.options.length = 0;

cmbCity.onchange = null;

if(cmbProvince.selectedIndex == -1)return;

var item = cmbProvince.options[cmbProvince.selectedIndex].obj;

for(var i=0; i<item.cityList.length; i++)

{

cmbAddOption(cmbCity, item.cityList[i].name, item.cityList[i]);

}

cmbSelect(cmbCity, defaultCity);

changeCity();

cmbCity.onchange = changeCity;

}

for(var i=0; i<provinceList.length; i++)

{

cmbAddOption(cmbProvince, provinceList[i].name, provinceList[i]);

}

cmbSelect(cmbProvince, defaultProvince);

changeProvince();

cmbProvince.onchange = changeProvince;

}

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:[‘市辖区‘,‘翠云区‘,‘普洱哈尼族彝族自治县‘,‘墨江哈尼族自治县‘,‘景东彝族自治县‘,‘景谷傣族彝族自治县‘,‘镇沅彝族哈尼族拉祜族自治县‘,‘江城哈尼族彝族自治县‘,‘孟连傣族拉祜族佤族自治县‘,‘澜沧拉祜族自治县‘,‘西盟佤族自治县‘]},

{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:‘河南省‘, 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:‘台湾省‘, cityList:[

]},

{name:‘香港‘, cityList:[

]},

{name:‘澳门‘, cityList:[

]}

];

注:由于字数限制,只列出了部分省市地区,想要完整代码的朋友,

下面有附件,附件是完整的js文件,可以直接使用

时间: 2024-10-22 01:02:53

中国地区三级联动菜单(纯js制作)的相关文章

省份,城市,地区------三级联动菜单

模板部分代码: <form method='post' action='' id='myform' name='myform'> <dl><dt>地址</dt> <dd> <select name='prov' id='prov'> <option value=''>省份</option> <?php $prov=M('')->where($where)->order('order')->

JS省市县三级联动菜单

<html> <head> <title>JS省市县三级联动菜单丨潜水曝气机</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> body,select { font-size:9pt; font-family:Verdana; } a { color:red; text-dec

城市三级联动 AJAX-原生js封装

话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>城市三级联动 - citys-原生js封装</title> <link rel="shortcut icon" href="../public/image/favi

转: javascript实现全国城市三级联动菜单代码

<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script LANGUAGE="JavaScript"> function Dsy() { this.Items = {}; } Dsy

地区三级联动--省份province

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地区三级联动</title> <script src="./jquery.js"></script> </head> <body> <h2>地区三级联动</h2> 省

Webform——中国省市三级联动以及IsPostBack

首先要明白Webform的运行顺序,当开始启动时候,首先执行的是Page_Load事件, 当点击任意按钮后,每次点击都要先执行一遍Page_Load(在这里Page_Load里面的事件是给数据控件加载数据)事件,然后才执行按钮上的内容. 但是如果是一个数据控件,里面存的是一些数据,如果用foreach遍历逐项给数据控件添数据的话,每次点击按钮(即刷新页面)都会执行一遍Page_Load,也就是说每次都要重复添加原来的数据,所以这就需要一个判断条件,使它只会第一次启动的时候走Page_Load事件

纯js制作的弹球游戏

纯js的弹球游戏,撞壁自动返回,按钮放置暂停移动,移开开始移动 1 <!-- 2 author:zhangjie 3 date :2016-7-23 4 --> 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <title></title> 9 <meta charset="UTF-8"> 10 <script type='text/javascript'> 11

【js与jquery】三级联动菜单的制作

1.效果如图所示: 2.html代码: [php] view plaincopy <li><span class="receiving">所在地区:</span> <span id="addr_select"> <select id='province_select' name='province'></select> <span id="city_select_poss&quo

学习 | 基于require.js的三级联动菜单【入门】

主要目的是学习如何使用require.js AMD就是通过延迟和按需加载来解决各个模块的依赖关系,其中require就是AMD的框架之一 它的优点是可以解决以下问题: JS文件的依赖关系. 通过异步加载优化script标签引起的阻塞问题 可以简单的以文件为单位将功能模块化并实现复用 源代码:https://github.com/dirkhe1051931999/writeBlog/tree/master/sanjiliantong html <section style="padding: