写一个有默认值三级联动菜单
2008-06-06 19:46
405 查看
网上看到很多三级联动菜单,但是都没有默认值,对于修改数据而言有点不是很方便。所以我参考别人的写了一个。以下是area.js
//** Power by familyX(2008-06-06)
//** Email:wzy-ok@163.com
// JavaScript Document
function Pcc(){ this.Items = {};}
function $(id){ return document.getElementById(id); }
Pcc.prototype.add = function(id,iArray){ this.Items[id] = iArray;}
var Pcc = new Pcc();
Pcc.add("0",["上海","北京","广东","河南","香港","澳门","台湾"]);
Pcc.add("0_0",["上海"]);
Pcc.add("0_0_0",["卢湾","徐汇","静安","长宁","闵行","浦东","黄浦","普陀","闸北","虹口","杨浦","宝山","金山","南汇","奉贤","嘉定","松江","青浦","崇明","其他"]);
Pcc.add("0_1",["北京"]);
Pcc.add("0_1_0",["朝阳","东城","西城","海淀","宣武","崇文","丰台","石景山","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","延庆","密云","其他"]);
Pcc.add("0_2",["广州","深圳","东莞","潮州","佛山","河源","惠州","江门","揭阳","茂名","梅州","清远","汕头","汕尾","韶关","阳江","云浮","湛江","肇庆","中山","珠海","其他"]);
Pcc.add("0_2_0",["广州","天河","越秀","海珠","荔湾","白云","芳村","黄埔","番禺","花都","从化市","增城市","南沙","萝岗","其他"]);
Pcc.add("0_2_1",["深圳","福田区", "罗湖区", "南山区", "盐田区", "宝安区","龙岗区","其他"]);
Pcc.add("0_2_2",["东莞市","南城区","万江区","莞城区","东城区","清溪镇","塘厦镇","大朗镇","樟木头镇","中堂镇","石碣镇","石龙镇","常平镇","长安镇","大岭山镇","虎门镇","厚街镇","黄江镇","其他"]);
Pcc.add("0_2_3",["潮安县","潮州市","饶平县","其他"]);
Pcc.add("0_2_4",["佛山市","南海区","三水区","顺德区","高明区","禅城区","其他"]);
Pcc.add("0_2_5",["河源","源城区","龙川县","和平县","连平县","东源县","紫金县","其他"]);
Pcc.add("0_2_6",["惠州","惠城区","惠阳区","博罗县","惠东县","龙门县","其他"]);
Pcc.add("0_2_7",["江门","蓬江区","新会区","开平市","恩平市","鹤山市","台山市","其他"]);
Pcc.add("0_2_8",["揭阳","东山区","榕城区","普宁市","揭东县","揭西县","惠来县","其他"]);
Pcc.add("0_2_9",["茂名","茂港区","茂南区","信宜市","高州市","化州市","电白县","其他"]);
Pcc.add("0_2_10",["梅州","梅江区","大浦县","丰顺县","蕉岭县","平远县","梅县","五华县","兴宁县","其他"]);
Pcc.add("0_2_11",["清远","新城区","连州市","英德市","佛冈县","连南县","连山县","清新县","阳山县","其他"]);
Pcc.add("0_2_12",["汕头","濠江区","龙湖区","金平区","潮阳市","澄海市","南澳县","其他"]);
Pcc.add("0_2_13",["汕尾市","市城区","红海湾开发区","华侨管理区","陆丰市","陆河县","海丰县","其他"]);
Pcc.add("0_2_14",["韶关","浈江区","武江区","曲江区","乐昌市","南雄市","仁化县","始兴县","翁源县","新丰县","乳源县","其他"]);
Pcc.add("0_2_15",["阳江","江城区","海陵区","岗侨区","高新区","阳春市","阳东县","阳西县","其他"]);
Pcc.add("0_2_16",["云浮","云城区","罗定市","新兴县","郁南县","云安县","其他"]);
Pcc.add("0_2_17",["湛江","赤坎区","霞山区","麻章区","廉江市","雷州市","吴川市","遂溪县","徐闻县","其他"]);
Pcc.add("0_2_18",["肇庆","端州区","鼎湖区","高新区","高要市","四会市","广宁县","德庆县","封开县","怀集县","其他"]);
Pcc.add("0_2_19",["中山","火炬区","石岐区","东区","西区","南区","其他"]);
Pcc.add("0_2_20",["珠海","香洲区","金湾区","斗门区","高新区","万山区","保税区","横琴区","其他"]);
Pcc.add("0_2_21",["其他"]);
Pcc.add("0_3",["郑州","安阳","鹤壁","济源","焦作","开封","洛阳","南阳","平顶山","三门峡","商丘","新乡","信阳","许昌","周口","驻马店","漯河","濮阳","其他"]);
Pcc.add("0_3_0",["郑州市","惠济区","上街区","中原区","二七区","管城区","金水区","近郊","登封市","巩义市","新密市","新郑市","中牟县","荥阳市","其他"]);
Pcc.add("0_3_1",["安阳市","安阳县","滑县","林州市","内黄县","汤阴县","其他"]);
Pcc.add("0_3_2",["鹤壁市","浚县","淇县","其他"]);
Pcc.add("0_3_3",["济源市","其他"]);
Pcc.add("0_3_4",["焦作市","博爱县","孟州市","沁阳市","温县","武陟县","修武县","其他"]);
Pcc.add("0_3_5",["开封市","鼓楼区","龙亭区","顺河区","禹王台区","金明区","开封县","杞县","兰考县","通许县","尉氏县","其他"]);
Pcc.add("0_3_6",["洛阳市","洛宁县","孟津县","汝阳县","新安县","伊川县","宜阳县","偃师市","嵩县","栾川县","其他"]);
Pcc.add("0_3_7",["邓州市","方城县","南阳市","南召县","内乡县","社旗县","唐河县","桐柏县","西峡县","新野县","镇平县","淅川县","其他"]);
Pcc.add("0_3_8",["平顶山市","宝丰县","鲁山县","汝州市","舞钢市","叶县","郏县","其他"]);
Pcc.add("0_3_9",["三门峡市","灵宝市","卢氏县","陕县","义马市","渑池县","其他"]);
Pcc.add("0_3_10",["商丘市","民权县","宁陵县","夏邑县","永城市","虞城县","柘城县","睢县","其他"]);
Pcc.add("0_3_11",["新乡市","长垣县","封丘县","辉县市","获嘉县","卫辉市","新乡县","延津县","原阳县","其他"]);
Pcc.add("0_3_12",["信阳市","固始县","光山县","淮滨县","罗山县","商城县","息县","新县","潢川县","其他"]);
Pcc.add("0_3_13",["许昌市","长葛市","襄城县","许昌县","禹州市","鄢陵县","其他"]);
Pcc.add("0_3_14",["周口市","郸城县","扶沟县","淮阳县","鹿邑县","商水县","沈丘县","太康县","西华县","项城市","其他"]);
Pcc.add("0_3_15",["驻马店市","泌阳县","平舆县","确山县","汝南县","上蔡县","遂平县","西平县","新蔡县","正阳县","其他"]);
Pcc.add("0_3_16",["漯河市","临颍县","舞阳县","郾城县","其他"]);
Pcc.add("0_3_17",["濮阳市","范县","南乐县","清丰县","台前县","濮阳县","其他"]);
Pcc.add("0_4",["香港"]);
Pcc.add("0_4_0",["香港","九龙","新界","大屿山","其他","其他"]);
Pcc.add("0_5",["澳门"]);
Pcc.add("0_5_0",["澳门","其他"]);
Pcc.add("0_6",["台湾"]);
Pcc.add("0_6_0",["台湾","台北","高雄","基隆","台中","台南","新竹","嘉义","其他"]);
$(sArr[0]).options[0] = new Option("请选择省","");
function setup(sArr){
var pv = Pcc.Items[0];
var psIndex = "";
var csIndex = "";
$(sArr[0]).options[0] = new Option("请选择省","");
for(i=0;i<pv.length;i++) {
$(sArr[0]).options[i+1] = new Option(pv[i],pv[i]);
if(sArr[3] != undefined && pv[i]==sArr[3]) {
$(sArr[0]).options[i+1].selected = true;
psIndex = "0_"+i; } }
//填充市区
$(sArr[1]).options[0] = new Option("请选择市","");
if(psIndex != "") { var cv = Pcc.Items[psIndex];
for(i=0;i<cv.length;i++) {
$(sArr[1]).options[i+1] = new Option(cv[i],cv[i]);
if(sArr[4]!=undefined &&sArr[4]==cv[i]) {
csIndex = psIndex+"_"+i;
$(sArr[1]).options[i+1].selected = true;
} } }
//填充县区
inCountry(sArr,csIndex);
$(sArr[0]).onchange = function (){change(1);};
$(sArr[1]).onchange = function (){change(2);};}
function inCountry(sArr,csIndex){
$(sArr[2]).options[0] = new Option("请选择县区","");
if(csIndex != "") { var ctv = Pcc.Items[csIndex];
for(i=0;i<ctv.length;i++) {
$(sArr[2]).options[i+1] = new Option(ctv[i],ctv[i]);
if(sArr[5]==ctv[i]) $(sArr[2]).options[i+1].selected = true;
} }}
function change(v){
var str = "0";
for(i=0;i<v;i++) str += '_'+parseInt(($(sArr[i]).selectedIndex-1),10);
var va = Pcc.Items[str];
$(sArr[v]).options.length=1;
for(i=0;i<va.length;i++) $(sArr[v]).options[i+1] = new Option(va[i],va[i]);}
window.onload = function (){setup(sArr);};
HTML文件:
<script type="text/javascript">
var sArr = ["p","c","ct"];
//var sArr = ["p","c","ct","广东","广州","广州"];//有默认值的情况
</script>
<script type="text/javascript" src="newarea.js"></script>
<select name="p" id="p"><option value="">请选择省</option></select><select name="c" id="c"><option value="">请选择市</option></select><select name="ct" id="ct"><option value="">请选择县区</option></select>
//** Power by familyX(2008-06-06)
//** Email:wzy-ok@163.com
// JavaScript Document
function Pcc(){ this.Items = {};}
function $(id){ return document.getElementById(id); }
Pcc.prototype.add = function(id,iArray){ this.Items[id] = iArray;}
var Pcc = new Pcc();
Pcc.add("0",["上海","北京","广东","河南","香港","澳门","台湾"]);
Pcc.add("0_0",["上海"]);
Pcc.add("0_0_0",["卢湾","徐汇","静安","长宁","闵行","浦东","黄浦","普陀","闸北","虹口","杨浦","宝山","金山","南汇","奉贤","嘉定","松江","青浦","崇明","其他"]);
Pcc.add("0_1",["北京"]);
Pcc.add("0_1_0",["朝阳","东城","西城","海淀","宣武","崇文","丰台","石景山","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","延庆","密云","其他"]);
Pcc.add("0_2",["广州","深圳","东莞","潮州","佛山","河源","惠州","江门","揭阳","茂名","梅州","清远","汕头","汕尾","韶关","阳江","云浮","湛江","肇庆","中山","珠海","其他"]);
Pcc.add("0_2_0",["广州","天河","越秀","海珠","荔湾","白云","芳村","黄埔","番禺","花都","从化市","增城市","南沙","萝岗","其他"]);
Pcc.add("0_2_1",["深圳","福田区", "罗湖区", "南山区", "盐田区", "宝安区","龙岗区","其他"]);
Pcc.add("0_2_2",["东莞市","南城区","万江区","莞城区","东城区","清溪镇","塘厦镇","大朗镇","樟木头镇","中堂镇","石碣镇","石龙镇","常平镇","长安镇","大岭山镇","虎门镇","厚街镇","黄江镇","其他"]);
Pcc.add("0_2_3",["潮安县","潮州市","饶平县","其他"]);
Pcc.add("0_2_4",["佛山市","南海区","三水区","顺德区","高明区","禅城区","其他"]);
Pcc.add("0_2_5",["河源","源城区","龙川县","和平县","连平县","东源县","紫金县","其他"]);
Pcc.add("0_2_6",["惠州","惠城区","惠阳区","博罗县","惠东县","龙门县","其他"]);
Pcc.add("0_2_7",["江门","蓬江区","新会区","开平市","恩平市","鹤山市","台山市","其他"]);
Pcc.add("0_2_8",["揭阳","东山区","榕城区","普宁市","揭东县","揭西县","惠来县","其他"]);
Pcc.add("0_2_9",["茂名","茂港区","茂南区","信宜市","高州市","化州市","电白县","其他"]);
Pcc.add("0_2_10",["梅州","梅江区","大浦县","丰顺县","蕉岭县","平远县","梅县","五华县","兴宁县","其他"]);
Pcc.add("0_2_11",["清远","新城区","连州市","英德市","佛冈县","连南县","连山县","清新县","阳山县","其他"]);
Pcc.add("0_2_12",["汕头","濠江区","龙湖区","金平区","潮阳市","澄海市","南澳县","其他"]);
Pcc.add("0_2_13",["汕尾市","市城区","红海湾开发区","华侨管理区","陆丰市","陆河县","海丰县","其他"]);
Pcc.add("0_2_14",["韶关","浈江区","武江区","曲江区","乐昌市","南雄市","仁化县","始兴县","翁源县","新丰县","乳源县","其他"]);
Pcc.add("0_2_15",["阳江","江城区","海陵区","岗侨区","高新区","阳春市","阳东县","阳西县","其他"]);
Pcc.add("0_2_16",["云浮","云城区","罗定市","新兴县","郁南县","云安县","其他"]);
Pcc.add("0_2_17",["湛江","赤坎区","霞山区","麻章区","廉江市","雷州市","吴川市","遂溪县","徐闻县","其他"]);
Pcc.add("0_2_18",["肇庆","端州区","鼎湖区","高新区","高要市","四会市","广宁县","德庆县","封开县","怀集县","其他"]);
Pcc.add("0_2_19",["中山","火炬区","石岐区","东区","西区","南区","其他"]);
Pcc.add("0_2_20",["珠海","香洲区","金湾区","斗门区","高新区","万山区","保税区","横琴区","其他"]);
Pcc.add("0_2_21",["其他"]);
Pcc.add("0_3",["郑州","安阳","鹤壁","济源","焦作","开封","洛阳","南阳","平顶山","三门峡","商丘","新乡","信阳","许昌","周口","驻马店","漯河","濮阳","其他"]);
Pcc.add("0_3_0",["郑州市","惠济区","上街区","中原区","二七区","管城区","金水区","近郊","登封市","巩义市","新密市","新郑市","中牟县","荥阳市","其他"]);
Pcc.add("0_3_1",["安阳市","安阳县","滑县","林州市","内黄县","汤阴县","其他"]);
Pcc.add("0_3_2",["鹤壁市","浚县","淇县","其他"]);
Pcc.add("0_3_3",["济源市","其他"]);
Pcc.add("0_3_4",["焦作市","博爱县","孟州市","沁阳市","温县","武陟县","修武县","其他"]);
Pcc.add("0_3_5",["开封市","鼓楼区","龙亭区","顺河区","禹王台区","金明区","开封县","杞县","兰考县","通许县","尉氏县","其他"]);
Pcc.add("0_3_6",["洛阳市","洛宁县","孟津县","汝阳县","新安县","伊川县","宜阳县","偃师市","嵩县","栾川县","其他"]);
Pcc.add("0_3_7",["邓州市","方城县","南阳市","南召县","内乡县","社旗县","唐河县","桐柏县","西峡县","新野县","镇平县","淅川县","其他"]);
Pcc.add("0_3_8",["平顶山市","宝丰县","鲁山县","汝州市","舞钢市","叶县","郏县","其他"]);
Pcc.add("0_3_9",["三门峡市","灵宝市","卢氏县","陕县","义马市","渑池县","其他"]);
Pcc.add("0_3_10",["商丘市","民权县","宁陵县","夏邑县","永城市","虞城县","柘城县","睢县","其他"]);
Pcc.add("0_3_11",["新乡市","长垣县","封丘县","辉县市","获嘉县","卫辉市","新乡县","延津县","原阳县","其他"]);
Pcc.add("0_3_12",["信阳市","固始县","光山县","淮滨县","罗山县","商城县","息县","新县","潢川县","其他"]);
Pcc.add("0_3_13",["许昌市","长葛市","襄城县","许昌县","禹州市","鄢陵县","其他"]);
Pcc.add("0_3_14",["周口市","郸城县","扶沟县","淮阳县","鹿邑县","商水县","沈丘县","太康县","西华县","项城市","其他"]);
Pcc.add("0_3_15",["驻马店市","泌阳县","平舆县","确山县","汝南县","上蔡县","遂平县","西平县","新蔡县","正阳县","其他"]);
Pcc.add("0_3_16",["漯河市","临颍县","舞阳县","郾城县","其他"]);
Pcc.add("0_3_17",["濮阳市","范县","南乐县","清丰县","台前县","濮阳县","其他"]);
Pcc.add("0_4",["香港"]);
Pcc.add("0_4_0",["香港","九龙","新界","大屿山","其他","其他"]);
Pcc.add("0_5",["澳门"]);
Pcc.add("0_5_0",["澳门","其他"]);
Pcc.add("0_6",["台湾"]);
Pcc.add("0_6_0",["台湾","台北","高雄","基隆","台中","台南","新竹","嘉义","其他"]);
$(sArr[0]).options[0] = new Option("请选择省","");
function setup(sArr){
var pv = Pcc.Items[0];
var psIndex = "";
var csIndex = "";
$(sArr[0]).options[0] = new Option("请选择省","");
for(i=0;i<pv.length;i++) {
$(sArr[0]).options[i+1] = new Option(pv[i],pv[i]);
if(sArr[3] != undefined && pv[i]==sArr[3]) {
$(sArr[0]).options[i+1].selected = true;
psIndex = "0_"+i; } }
//填充市区
$(sArr[1]).options[0] = new Option("请选择市","");
if(psIndex != "") { var cv = Pcc.Items[psIndex];
for(i=0;i<cv.length;i++) {
$(sArr[1]).options[i+1] = new Option(cv[i],cv[i]);
if(sArr[4]!=undefined &&sArr[4]==cv[i]) {
csIndex = psIndex+"_"+i;
$(sArr[1]).options[i+1].selected = true;
} } }
//填充县区
inCountry(sArr,csIndex);
$(sArr[0]).onchange = function (){change(1);};
$(sArr[1]).onchange = function (){change(2);};}
function inCountry(sArr,csIndex){
$(sArr[2]).options[0] = new Option("请选择县区","");
if(csIndex != "") { var ctv = Pcc.Items[csIndex];
for(i=0;i<ctv.length;i++) {
$(sArr[2]).options[i+1] = new Option(ctv[i],ctv[i]);
if(sArr[5]==ctv[i]) $(sArr[2]).options[i+1].selected = true;
} }}
function change(v){
var str = "0";
for(i=0;i<v;i++) str += '_'+parseInt(($(sArr[i]).selectedIndex-1),10);
var va = Pcc.Items[str];
$(sArr[v]).options.length=1;
for(i=0;i<va.length;i++) $(sArr[v]).options[i+1] = new Option(va[i],va[i]);}
window.onload = function (){setup(sArr);};
HTML文件:
<script type="text/javascript">
var sArr = ["p","c","ct"];
//var sArr = ["p","c","ct","广东","广州","广州"];//有默认值的情况
</script>
<script type="text/javascript" src="newarea.js"></script>
<select name="p" id="p"><option value="">请选择省</option></select><select name="c" id="c"><option value="">请选择市</option></select><select name="ct" id="ct"><option value="">请选择县区</option></select>
相关文章推荐
- 省市区三级联动菜单实现及三级联动下拉列表框默认值的设置
- 省市区三级联动菜单实现及三级联动下拉列表框默认值的设置
- JS +XML +Jquery 实现三级联动菜单,自己封装的一个对象方便使用
- JQuery 现实 三级联动菜单
- 侧滑菜单+三级联动搜索下拉框
- php三级联动菜单
- 实现无刷新三级联动菜单[VS2005与AjaxPro]
- 利用JS实现一个简单的二级联动菜单
- 在thinkphp中使用省市县三级菜单联动
- 一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)
- 【Jquery 插件】一个小巧的jquery 三级联动多选插件
- 原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
- js省市级联 三级联动菜单
- 省市区三级菜单联动插件
- javascript读取Xml文件做一个二级联动菜单示例
- PHP+JS三级菜单联动菜单实现方法
- JS来实现省市县三级联动菜单
- JavaScript省市区三级联动菜单效果