option城市选择源码的简单介绍
本文目录一览：
- 1、淘宝的js省市区联动菜单是怎么做的
- 2、请问如何实现：在网页中选择了国家，下面自动出现该国家的省名供选择
- 3、javascript实现二级联动，比如连个下拉列表，一个选择省份，另一个自动出现相应城市
- 4、我现在需要一个二级联动城市的下拉菜单asp源代码,同志们帮帮忙啊!
淘宝的js省市区联动菜单是怎么做的
源码里面要记得放省事等数据 要json的格式
!DOCTYPE html
html
head
meta charset="utf-8"
title省市区三级联动/title
/head
body
form
select id="province"
option请选择省份/option
/select
select id="city"
option请选择城市/option
/select
select id="district"
option请选择区域/option
/select
/form
script src="json.js"/script
script type="text/javascript"
var proData = [],
cityData = [],
distData = [];
var proSelect = document.getElementById("province"),
citySelect = document.getElementById("city"),
districtSelect = document.getElementById("district");
var curPro = "",
curCity = "";
// 封装更新选择列表函数
function fillselect(select,list){
for (var i = select.length-1; i 0 ; i--){
select.remove(i);
}
list.forEach(function(data){
var option = new Option(data.name, data.sheng);
option.dataset.di = data.di;
select.add(option);
})
}
// 将数据按省、市、地区分别存储
dataJson.forEach(function(data){
if (data.level === 1){
proData.push(data);
}
if (data.level === 2){
cityData.push(data);
}
if (data.level === 3){
distData.push(data);
}
})
fillselect(proSelect,proData);
// 监听一级省份选择列表change事件，更新二级城市列表
proSelect.addEventListener("change",function(event){
var val = event.target.value;
var list = [];
cityData.forEach(function(d){
if (d.sheng === val) {
list.push(d);
}
})
fillselect(citySelect,list);
})
// 监听二级城市选择列表change事件，更新三级区域列表
citySelect.addEventListener("change",function(event){
var val = event.target.value;
var curIndex = event.target.selectedIndex;
curCity = event.target[curIndex].dataset.di;
console.log(event.target,curCity);
var list = [];
distData.forEach(function(d){
if (d.di === curCity d.sheng === val) {
list.push(d);
}
})
fillselect(districtSelect,list);
})
/script
/body
/html
请问如何实现：在网页中选择了国家，下面自动出现该国家的省名供选择
script type="text/javascript"
//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
var city=[
["北京","天津","上海","重庆","香港","澳门"],
["石家庄","唐山","秦皇岛","邯郸","邢台","保定","张家口","承德","沧州","廊坊","衡水"],
["太原","大同","阳泉","长治","晋城","朔州","晋中","运城","忻州","临汾","吕梁"],
["呼和浩特","包头","乌海","赤峰","通辽","鄂尔多斯","呼伦贝尔","巴彦淖尔","乌兰察布","兴安","锡林郭勒","阿拉善"],
["沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛"],
["长春","吉林","四平","辽源","通化","白山","松原","白城","延边"],
["哈尔滨","齐齐哈尔","鸡西","鹤岗","双鸭山","大庆","伊春","佳木斯","七台河","牡丹江","黑河","绥化","大兴安岭"],
["南京","苏州","扬州","无锡","徐州","常州","南通","连云港","淮安","盐城","镇江","泰州","宿迁"],
["杭州","宁波","温州","嘉兴","湖州","绍兴","金华","衢州","舟山","台州","丽水"],
["合肥","芜湖","蚌埠","淮南","马鞍山","淮北","铜陵","安庆","黄山","滁州","阜阳","宿州","巢湖","六安","亳州","池州","宣城"],
["福州","宁德","南平","厦门","莆田","三明","泉州","漳州"],
["南昌","上饶","萍乡","九江","景德镇","新余","鹰潭","赣州","吉安","宜春","抚州"],
["济南","青岛","淄博","枣庄","东营","烟台","潍坊","威海","济宁","泰安","日照","莱芜","临沂","德州","聊城","滨州","菏泽"],
["郑州","开封","洛阳","平顶山","焦作","鹤壁","新乡","安阳","濮阳","漯河","许昌","三门峡","南阳","商丘","信阳","周口","驻马店"],
["武汉","十堰","襄樊","鄂州","黄石","荆州","宜昌","荆门","孝感","黄冈","咸宁","随州","恩施"],
["长沙","株洲","湘潭","岳阳","邵阳","常德","衡阳","张家界","益阳","郴州","永州","怀化","娄底","湘西"],
["广州","清远","潮州","东莞","珠海","深圳","汕头","韶关","佛山","江门","湛江","茂名","肇庆","惠州","梅州","汕尾","阳江","河源","中山","揭阳","云浮"],
["南宁","柳州","桂林","梧州","北海","防城港","钦州","贵港","玉林","百色","贺州","河池","来宾","崇左"],
["海口","三亚"],
["成都","自贡","攀枝花","泸州","德阳","绵阳","广元","遂宁","内江","乐山","南充","宜宾","广安","达州","眉山","雅安","巴中","资阳","阿坝","甘孜","凉山"],
["贵阳","六盘水","遵义","安顺","铜仁","毕节","黔西南","黔东南","黔南"],
["昆明","曲靖","玉溪","保山","昭通","丽江","普洱","临沧","文山","红河","西双版纳","楚雄","大理","德宏","怒江","迪庆"],
["拉萨","昌都","山南","日喀则","那曲","阿里","林芝"],
["西安","铜川","宝鸡","咸阳","渭南","延安","汉中","榆林","安康","商洛"],
["兰州","白银","定西","敦煌","嘉峪关","金昌","天水","武威","张掖","平凉","酒泉","庆阳","临夏","陇南","甘南"],
["西宁","海东","海北","黄南","海南","果洛","玉树","海西"],
["银川","石嘴山","吴忠","固原","中卫"],
["乌鲁木齐","克拉玛依","吐鲁番","哈密","和田","阿克苏","喀什","克孜勒苏柯尔克孜","巴音郭楞蒙古","昌吉","博尔塔拉蒙古","伊犁哈萨克","阿勒泰"],
["台北","高雄","基隆","台中","台南","新竹","嘉义"]
];
function getCity(){
//获得省份下拉框的对象
var sltProvince=document.forms[0].province;
//获得城市下拉框的对象
var sltCity=document.forms[0].city;
//得到对应省份的城市数组
var provinceCity=city[sltProvince.selectedIndex - 1];
//清空城市下拉框，仅留提示选项
sltCity.length=1;
//将城市数组中的值填充到城市下拉框中
for(var i=0;iprovinceCity.length;i++){
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
}
}
/script
form action="#" method="POST" name="myform" target="_self" id="myform"
select name="province" onChange="getCity()"
option value="null" disabled="disabled"请选择所在省份/option
option value="直辖市"直辖市/option
option value="河北"河北/option
option value="山西"山西/option
option value="内蒙古"内蒙古/option
option value="辽宁"辽宁/option
option value="吉林"吉林/option
option value="黑龙江"黑龙江/option
option value="江苏"江苏/option
option value="浙江"浙江/option
option value="安徽"安徽 /option
option value="福建"福建 /option
option value="江西"江西/option
option value="山东"山东/option
option value="河南"河南/option
option value="湖北"湖北/option
option value="湖南"湖南/option
option value="广东"广东/option
option value="广西"广西/option
option value="海南"海南/option
option value="四川"四川/option
option value="贵州"贵州/option
option value="云南"云南/option
option value="西藏"西藏/option
option value="陕西"陕西 /option
option value="甘肃"甘肃 /option
option value="青海"青海/option
option value="宁夏"宁夏/option
option value="新疆"新疆/option
option value="台湾"台湾/option
/select
select name="city"
option selected="selected" value="null"请选择所在城市/option
/select
/form 直接用就可以了。这是 省市 2级联动
javascript实现二级联动，比如连个下拉列表，一个选择省份，另一个自动出现相应城市
script language=vbScript
!--
public x(33)
x( 0 )="东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆"
x( 1 )="黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明"
x( 2 )="和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县"
x( 3 )="万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川"
x( 4 )="石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水"
x( 5 )="太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城"
x( 6 )="呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟"
x( 7 )="沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛"
x( 8 )="长春,吉林,四平,辽源,通化,白山,松原,白城,延边"
x( 9 )="哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭"
x( 10 )="南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安"
x( 11 )="杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水"
x( 12 )="合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州"
x( 13 )="福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德"
x( 14 )="南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶"
x( 15 )="济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽"
x( 16 )="郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源"
x( 17 )="武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州"
x( 18 )="长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界"
x( 19 )="广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮"
x( 20 )="南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池"
x( 21 )="海口,三亚"
x( 22 )="成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州"
x( 23 )="贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南"
x( 24 )="昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧"
x( 25 )="拉萨,日喀则,山南,林芝,昌都,阿里,那曲"
x( 26 )="西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛"
x( 27 )="兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南"
x( 28 )="银川,石嘴山,吴忠,固原"
x( 29 )="西宁,海东,海南,海北,黄南,玉树,果洛,海西"
x( 30 )="乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博 尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏"
x( 31 )=""
x( 32 )=""
x( 33 )="台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖"
function test(a,b)
dim num,x1,i
num =a.selectedIndex
x1=split(x(num),",")
b.options.length=ubound(x1)+1
For i = 0 to ubound(x1)
b.options(i).text =x1(i)
b.options(i).value = x1(i)
next
end function
--
/script
body
select name="a" size=1 onChange="vbscript:test a,b"
option value= 0 北京/option
option value= 1 上海/option
option value= 2 天津/option
option value= 3 重庆/option
option value= 4 河北/option
option value= 5 山西/option
option value= 6 内蒙古/option
option value= 7 辽宁/option
option value= 8 吉林/option
option value= 9 黑龙江/option
option value= 10 江苏/option
option value= 11 浙江/option
option value= 12 安徽/option
option value= 13 福建/option
option value= 14 江西/option
option value= 15 山东/option
option value= 16 河南/option
option value= 17 湖北/option
option value= 18 湖南/option
option value= 19 广东/option
option value= 20 广西/option
option value= 21 海南/option
option value= 22 四川/option
option value= 23 贵州/option
option value= 24 云南/option
option value= 25 西藏/option
option value= 26 陕西/option
option value= 27 甘肃/option
option value= 28 宁夏/option
option value= 29 青海/option
option value= 30 新疆/option
option value= 31 香港/option
option value= 32 澳门/option
option value= 33 台湾/option
/select
select name="b"
/select
拷贝到记事本.保存为.htm或.asp
我现在需要一个二级联动城市的下拉菜单asp源代码,同志们帮帮忙啊!
SCRIPT LANGUAGE="JavaScript"
function Dsy()
{
this.Items = {};
}
Dsy.prototype.add = function(id,iArray)
{
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id)
{
if(typeof(this.Items[id]) == "undefined") return false;
return true;
}
function change(v){
var str="0";
for(i=0;iv;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1));};
var ss=document.getElementById(s[v]);
with(ss){
length = 0;
options[0]=new Option(opt0[v],opt0[v]);
if(v document.getElementById(s[v-1]).selectedIndex0 || !v)
{
if(dsy.Exists(str)){
ar = dsy.Items[str];
for(i=0;iar.length;i++)options[length]=new Option(ar[i],ar[i]);
if(v)options[1].selected = true;
}
}
if(++vs.length){change(v);}
}
}
var dsy = new Dsy();
dsy.add("0",["北京市","天津市","河北省","山西省","内蒙古","辽宁省","吉林省","黑龙江省","上海市","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西自治区","海南省","重庆市","四川省","贵州省","云南省","西藏自治区","陕西省","甘肃省","青海省","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区","台湾省","其它"]);
dsy.add("0_0",["北京","东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区"," 海淀区（中关村）","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县","其他"]);
dsy.add("0_1",["和平区","河东区","河西区","南开区","红桥区","塘沽区","汉沽区","大港区","西青区","津南区","武清区","蓟县","宁河县","静海县","其他"]);
dsy.add("0_2",["石家庄市","张家口市","承德市","秦皇岛市","唐山市","廊坊市","衡水市","沧州市","邢台市","邯郸市","保定市","其他"]);
dsy.add("0_3",["太原市","朔州市","大同市","长治市","晋城市","忻州市","晋中市","临汾市","吕梁市","运城市","其他"]);
dsy.add("0_4",["呼和浩特市","包头市","赤峰市","呼伦贝尔市","鄂尔多斯市","乌兰察布市","巴彦淖尔市","兴安盟","阿拉善盟","锡林郭勒盟","其他"]);
dsy.add("0_5",["沈阳市","朝阳市","阜新市","铁岭市","抚顺市","丹东市","本溪市","辽阳市","鞍山市","大连市","营口市","盘锦市","锦州市","葫芦岛市","其他"]);
dsy.add("0_6",["长春市","白城市","吉林市","四平市","辽源市","通化市","白山市","延边朝鲜族自治州","其他"]);
dsy.add("0_7",["哈尔滨市","七台河市","黑河市","大庆市","齐齐哈尔市","伊春市","佳木斯市","双鸭山市","鸡西市","大兴安岭地区(加格达奇)","牡丹江","鹤岗市","绥化市 ","其他"]);
dsy.add("0_8",["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","南汇区","奉贤区","崇明县","其他"]);
dsy.add("0_9",["南京市","徐州市","连云港市","宿迁市","淮安市","盐城市","扬州市","泰州市","南通市","镇江市","常州市","无锡市","苏州市","其他"]);
dsy.add("0_10",["杭州市","湖州市","嘉兴市","舟山市","宁波市","绍兴市","衢州市","金华市","台州市","温州市","丽水市","其他"]);
dsy.add("0_11",["合肥市","宿州市","淮北市","亳州市","阜阳市","蚌埠市","淮南市","滁州市","马鞍山市","芜湖市","铜陵市","安庆市","黄山市","六安市","巢湖市","池州市","宣城市","其他"]);
dsy.add("0_12",["福州市","南平市","莆田市","三明市","泉州市","厦门市","漳州市","龙岩市","宁德市","其他"]);
dsy.add("0_13",["南昌市","九江市","景德镇市","鹰潭市","新余市","萍乡市","赣州市","上饶市","抚州市","宜春市","吉安市","其他"]);
dsy.add("0_14",["济南市","聊城市","德州市","东营市","淄博市","潍坊市","烟台市","威海市","青岛市","日照市","临沂市","枣庄市","济宁市","泰安市","莱芜市","滨州市","菏泽市","其他"]);
dsy.add("0_15",["郑州市","三门峡市","洛阳市","焦作市","新乡市","鹤壁市","安阳市","濮阳市","开封市","商丘市","许昌市","漯河市","平顶山市","南阳市","信阳市","周口市","驻马店市","其他"]);
dsy.add("0_16",["武汉市","十堰市","襄樊市","荆门市","孝感市","黄冈市","鄂州市","黄石市","咸宁市","荆州市","宜昌市","随州市","恩施土家族苗族自治州","仙桃市","天门市","潜江市","神农架林区","其他"]);
dsy.add("0_17",["长沙市","张家界市","常德市","益阳市","岳阳市","株洲市","湘潭市","衡阳市","郴州市","永州市","邵阳市","怀化市","娄底市","湘西土家族苗族自治州","其他"]);
dsy.add("0_18",["广州市","清远市市","韶关市","河源市","梅州市","潮州市","汕头市","揭阳市","汕尾市","惠州市","东莞市","深圳市","珠海市","中山市","江门市","佛山市","肇庆市","云浮市","阳江市","茂名市","湛江市","其他"]);
dsy.add("0_19",["南宁市","桂林市","柳州市","梧州市","贵港市","玉林市","钦州市","北海市","防城港市","崇左市","百色市","河池市","来宾市","贺州市","其他"]);
dsy.add("0_20",["海口市","三亚市","其他"]);
dsy.add("0_21",["渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","万盛区","双桥区","渝北区","巴南区","万州区","涪陵区","黔江区","长寿区","合川市","永川市","江津市","南川市","綦江县","潼南县","铜梁县","大足县","璧山县","垫江县","武隆县","丰都县","城口县","开县","巫溪县","巫山县","奉节县","云阳县","忠县","石柱土家族自治县","彭水苗族土家族自治县","酉阳土家族苗族自治县","秀山土家族苗族自治县","其他"]);
dsy.add("0_22",["成都市","广元市","绵阳市","德阳市","南充市","广安市","遂宁市","内江市","乐山市","自贡市","泸州市","宜宾市","攀枝花市","巴中市","资阳市","眉山市","雅安","阿坝藏族羌族自治州","甘孜藏族自治州","凉山彝族自治州县","其他"]);
dsy.add("0_23",["贵阳市","六盘水市","遵义市","安顺市","毕节地区","铜仁地区","黔东南苗族侗族自治州","黔南布依族苗族自治州","黔西南布依族苗族自治州","其他"]);
dsy.add("0_24",["昆明市","曲靖市","玉溪市","保山市","昭通市","丽江市","普洱市","临沧市","宁德市","德宏傣族景颇族自治州","怒江僳僳族自治州","楚雄彝族自治州","红河哈尼族彝族自治州","文山壮族苗族自治州","大理白族自治州","迪庆藏族自治州","西双版纳傣族自治州","其他"]);
dsy.add("0_25",["拉萨市","那曲地区","昌都地区","林芝地区","山南地区","日喀则地区","阿里地区","其他"]);
dsy.add("0_26",["西安市","延安市","铜川市","渭南市","咸阳市","宝鸡市","汉中市","安康市","商洛市","其他"]);
dsy.add("0_27",["兰州市 ","嘉峪关市","金昌市","白银市","天水市","武威市","酒泉市","张掖市","庆阳市","平凉市","定西市","陇南市","临夏回族自治州","甘南藏族自治州","其他"]);
dsy.add("0_28",["西宁市","海东地区","海北藏族自治州","黄南藏族自治州","玉树藏族自治州","海南藏族自治州","果洛藏族自治州","海西蒙古族藏族自治州","其他"]);
dsy.add("0_29",["银川市","石嘴山市","吴忠市","固原市","中卫市","其他"]);
dsy.add("0_30",["乌鲁木齐市","克拉玛依市","喀什地区","阿克苏地区","和田地区","吐鲁番地区","哈密地区","塔城地区","阿勒泰地区","克孜勒苏柯尔克孜自治州","博尔塔拉蒙古自治州","昌吉回族自治州 伊犁哈萨克自治州","巴音郭楞蒙古自治州","河子市","阿拉尔市","五家渠市","图木舒克市","其他"]);
dsy.add("0_31",["香港","其他"]);
dsy.add("0_31",["澳门","其他"])
dsy.add("0_32",["台湾","其他"])
//--
/SCRIPT
SCRIPT LANGUAGE = JavaScript
var s=["s1","s2"];
var opt0 = ["请选择","请选择"];
function setup()
{
for(i=0;is.length-1;i++)
document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
change(0);
}
/SCRIPT
调用：select name="lz_sf" id="s1"
option/option/select
select name="lz_sx" id="s2"
option/option/select
SCRIPT language="javascript"
setup()
/SCRIPT
