关联省份与学校的级联HTML,JS实现的省份级联实例代码

这是从本人以前博客带过来的,感觉这个还蛮实用,代码分享下:

province.html:

省份与省市级联
省份
城市

province.js:

var sity;city=new Array(34);city[0]=new Array(19);

city[0][0]="北京";city[0][1]="东城";city[0][2]="西城";city[0][3]="宣武";city[0][4]="朝阳";city[0][5]="崇文";city[0][6]="海淀";city[0][7]="丰台";city[0][8]="石景山";city[0][9]="通州";city[0][10]="平谷";city[0][11]="顺义";city[0][12]="怀柔";city[0][13]="密云";city[0][14]="延庆";city[0][15]="昌平";city[0][16]="门头沟";city[0][17]="房山";city[0][18]="大兴";city[1]=new Array(12);city[1][0]="上海";city[1][1]="近郊";city[1][2]="闵行";city[1][3]="浦东";city[1][4]="南汇";city[1][5]="奉贤";city[1][6]="金山";city[1][7]="松江";city[1][8]="青浦";city[1][9]="嘉定";city[1][10]="宝山";city[1][11]="崇明";city[2]=new Array(8);city[2][0]="天津";city[2][1]="塘沽";city[2][2]="汉沽";city[2][3]="宁河";city[2][4]="静海";city[2][5]="武清";city[2][6]="宝坻";city[2][7]="蓟县";city[3]=new Array(1);city[3][0]="重庆";city[4]=new Array(14);city[4][0]="内蒙古";city[4][1]="呼和浩特";city[4][2]="集宁";city[4][3]="包头";city[4][4]="临河";city[4][5]="乌海";city[4][6]="东胜";city[4][7]="海拉尔";city[4][8]="赤峰";city[4][9]="锡林浩特";city[4][10]="太仆寺旗";city[4][11]="通辽";city[4][12]="阿拉善盟";city[4][13]="白城";city[5]=new Array(12);city[5][0]="河北";city[5][1]="石家庄";city[5][2]="衡水";city[5][3]="邢台";city[5][4]="邯郸";city[5][5]="沧州";city[5][6]="唐山";city[5][7]="廊坊";city[5][8]="秦皇岛";city[5][9]="承德";city[5][10]="保定";city[5][11]="张家口";city[6]=new Array(13);city[6][0]="辽宁";city[6][1]="沈阳";city[6][2]="铁岭";city[6][3]="抚顺";city[6][4]="鞍山";city[6][5]="营口";city[6][6]="大连";city[6][7]="本溪";city[6][8]="丹东";city[6][9]="锦州";city[6][10]="朝阳";city[6][11]="阜新";city[6][12]="盘锦";city[7]=new Array(9);city[7][0]="吉林";city[7][1]="长春";city[7][2]="吉林";city[7][3]="延吉";city[7][4]="通化";city[7][5]="梅河口";city[7][6]="四平";city[7][7]="白城";city[7][8]="松原";city[8]=new Array(9);city[8][0]="黑龙江";city[8][1]="哈尔滨";city[8][2]="绥化";city[8][3]="佳木斯";city[8][4]="牡丹江";city[8][5]="齐齐哈尔";city[8][6]="大庆";city[8][7]="北安";city[8][8]="大兴安岭";city[9]=new Array(12);city[9][0]="江苏";city[9][1]="南京";city[9][2]="镇江";city[9][3]="常州";city[9][4]="无锡";city[9][5]="苏州";city[9][6]="徐州";city[9][7]="连云港";city[9][8]="淮阴";city[9][9]="盐城";city[9][10]="扬州";city[9][11]="南通";city[10]=new Array(12);city[10][0]="安徽";city[10][1]="合肥";city[10][2]="淮南";city[10][3]="蚌埠";city[10][4]="宿州";city[10][5]="阜阳";city[10][6]="六安";city[10][7]="巢湖";city[10][8]="滁州";city[10][9]="芜湖";city[10][10]="屯溪";city[10][11]="安庆";city[11]=new Array(14);city[11][0]="山东";city[11][1]="济南";city[11][2]="聊城";city[11][3]="德州";city[11][4]="淄博";city[11][5]="东营";city[11][6]="潍坊";city[11][7]="烟台";city[11][8]="青岛";city[11][9]="泰安";city[11][10]="济宁";city[11][11]="荷泽";city[11][12]="临沂";city[11][13]="枣庄";city[12]=new Array(12);city[12][0]="浙江";city[12][1]="杭州";city[12][2]="绍兴";city[12][3]="湖州";city[12][4]="嘉兴";city[12][5]="宁波";city[12][6]="舟山";city[12][7]="台州";city[12][8]="金华";city[12][9]="丽水";city[12][10]="衢州";city[12][11]="温州";city[13]=new Array(11);city[13][0]="江西";city[13][1]="南昌";city[13][2]="九江";city[13][3]="景德镇";city[13][4]="上饶";city[13][5]="鹰潭";city[13][6]="宜春";city[13][7]="萍乡";city[13][8]="赣州";city[13][9]="吉安";city[13][10]="抚州";city[14]=new Array(10);city[14][0]="福建";city[14][1]="福州";city[14][2]="南平";city[14][3]="邵武";city[14][4]="福安";city[14][5]="厦门";city[14][6]="泉州";city[14][7]="漳州";city[14][8]="龙岩";city[14][9]="三明";city[15]=new Array(14);city[15][0]="湖南";city[15][1]="长沙";city[15][2]="株洲";city[15][3]="益阳";city[15][4]="岳阳";city[15][5]="常德";city[15][6]="吉首";city[15][7]="娄底";city[15][8]="怀化";city[15][9]="衡阳";city[15][10]="邵阳";city[15][11]="郴州";city[15][12]="零陵";city[15][13]="张家界";city[16]=new Array(10);city[16][0]="湖北";city[16][1]="武汉";city[16][2]="沙市";city[16][3]="黄石";city[16][4]="鄂州";city[16][5]="咸宁";city[16][6]="襄樊";city[16][7]="十堰";city[16][8]="宜昌";city[16][9]="恩施";city[17]=new Array(15);city[17][0]="河南";city[17][1]="郑州";city[17][2]="新乡";city[17][3]="安阳";city[17][4]="许昌";city[17][5]="漯河";city[17][6]="驻马店";city[17][7]="信阳";city[17][8]="周口";city[17][9]="平顶山";city[17][10]="洛阳";city[17][11]="三门峡";city[17][12]="南阳";city[17][13]="开封";city[17][14]="商丘";city[18]=new Array(12);city[18][0]="广东";city[18][1]="广州";city[18][2]="韶关";city[18][3]="英德";city[18][4]="梅州";city[18][5]="汕头";city[18][6]="惠州";city[18][7]="深圳";city[18][8]="湛江";city[18][9]="茂名";city[18][10]="肇庆";city[18][11]="佛山";city[19]=new Array(9);city[19][0]="广西";city[19][1]="南宁";city[19][2]="百色";city[19][3]="钦州";city[19][4]="玉林";city[19][5]="桂林";city[19][6]="梧州";city[19][7]="柳州";city[19][8]="河池";city[20]=new Array(8);city[20][0]="贵州";city[20][1]="贵阳";city[20][2]="六盘水";city[20][3]="玉屏";city[20][4]="凯里";city[20][5]="都匀";city[20][6]="安顺";city[20][7]="遵义";city[21]=new Array(16);city[21][0]="四川";city[21][1]="成都";city[21][2]="乐山";city[21][3]="凉山";city[21][4]="渡口";city[21][5]="绵阳";city[21][6]="汶川";city[21][7]="雅安";city[21][8]="甘孜";city[21][9]="广元";city[21][10]="南充";city[21][11]="达州";city[21][12]="内江";city[21][13]="自贡";city[21][14]="宜宾";city[21][15]="泸州";city[22]=new Array(13);city[22][0]="云南";city[22][1]="昆明";city[22][2]="曲靖";city[22][3]="昭通";city[22][4]="开远";city[22][5]="文山";city[22][6]="思茅";city[22][7]="大理";city[22][8]="楚雄";city[22][9]="临沧";city[22][10]="保山";city[22][11]="六盘水";city[22][12]="渡口";city[23]=new Array(11);city[23][0]="陕西";city[23][1]="西安";city[23][2]="渭南";city[23][3]="延安";city[23][4]="绥德";city[23][5]="榆林";city[23][6]="宝鸡";city[23][7]="汉中";city[23][8]="安康";city[23][9]="商洛";city[23][10]="铜川";city[24]=new Array(13);city[24][0]="甘肃";city[24][1]="兰州";city[24][2]="武威";city[24][3]="张掖";city[24][4]="酒泉";city[24][5]="安西";city[24][6]="金昌";city[24][7]="天水";city[24][8]="定西";city[24][9]="平凉";city[24][10]="西峰";city[24][11]="陇西";city[24][12]="甘南";city[25]=new Array(5);city[25][0]="宁夏";city[25][1]="银川";city[25][2]="吴忠";city[25][3]="石咀山";city[25][4]="固原";city[26]=new Array(7);city[26][0]="青海";city[26][1]="西宁";city[26][2]="果洛";city[26][3]="玉树";city[26][4]="格尔木";city[26][5]="海西";city[26][6]="阿坝";city[27]=new Array(11);city[27][0]="新疆";city[27][1]="乌鲁木齐";city[27][2]="石河子";city[27][3]="乌苏";city[27][4]="克拉玛依";city[27][5]="伊宁";city[27][6]="吐鲁番";city[27][7]="哈密";city[27][8]="巴音郭楞";city[27][9]="阿克苏";city[27][10]="喀什";city[28]=new Array(8);city[28][0]="西藏";city[28][1]="拉萨";city[28][2]="那曲";city[28][3]="昌都";city[28][4]="山南";city[28][5]="日喀则";city[28][6]="阿里";city[28][7]="林芝";city[29]=new Array(4);city[29][0]="海南";city[29][1]="海口";city[29][2]="三亚";city[29][3]="海南";city[30]=new Array(12);city[30][0]="山西";city[30][1]="太原";city[30][2]="离石";city[30][3]="忻州";city[30][4]="宁武";city[30][5]="大同";city[30][6]="临汾";city[30][7]="侯马";city[30][8]="运城";city[30][9]="阳泉";city[30][10]="长治";city[30][11]="晋城";city[31]=new Array(17);city[31][0]="台湾";city[31][1]="台北";city[31][2]="台中";city[31][3]="基隆";city[31][4]="台南";city[31][5]="嘉义";city[31][6]="桃园";city[31][7]="苗粟";city[31][8]="屏东";city[31][9]="南投";city[31][10]="花莲";city[31][11]="新竹";city[31][12]="彰化";city[31][13]="高雄";city[31][14]="宜兰";city[31][15]="台东";city[31][16]="彭湖";city[32]=new Array(1);city[32][0]="香港";city[33]=new Array(1);city[33][0]="澳门";

function getRegion()

{

document.getElementById("city").innerHTML="";

var provinces=document.getElementById("provinces");

var prov=provinces[provinces.selectedIndex].value;

var str="";

for(var i=0;i

{

str=str+""+city[prov][i]+"";

}

str=str+"";

document.getElementById("city").innerHTML=str;

}

function getProvince()

{    var strs="";

for(var i=0;i<=33;i++)

{

strs=strs+""+city[i][0]+"";

}

strs=strs+"";

document.getElementById('province').innerHTML=strs;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的 HTML 和 JavaScript 实现级联查询的示例代码HTML 代码: ```html <label for="province">省份:</label> <select id="province" name="province"> <option value="">请选择</option> <option value="1">江苏省</option> <option value="2">浙江省</option> <option value="3">广东省</option> </select> <label for="city">城市:</label> <select id="city" name="city"> <option value="">请选择</option> </select> <label for="area">区县:</label> <select id="area" name="area"> <option value="">请选择</option> </select> ``` JavaScript 代码: ```javascript // 省份数据 var provinceData = [ {id: 1, name: '江苏省'}, {id: 2, name: '浙江省'}, {id: 3, name: '广东省'} ]; // 城市数据 var cityData = [ {provinceId: 1, id: 11, name: '南京市'}, {provinceId: 1, id: 12, name: '苏州市'}, {provinceId: 2, id: 21, name: '杭州市'}, {provinceId: 2, id: 22, name: '宁波市'}, {provinceId: 3, id: 31, name: '广州市'}, {provinceId: 3, id: 32, name: '深圳市'} ]; // 区县数据 var areaData = [ {cityId: 11, id: 111, name: '玄武区'}, {cityId: 11, id: 112, name: '秦淮区'}, {cityId: 12, id: 121, name: '姑苏区'}, {cityId: 12, id: 122, name: '吴中区'}, {cityId: 21, id: 211, name: '西湖区'}, {cityId: 21, id: 212, name: '上城区'}, {cityId: 22, id: 221, name: '江北区'}, {cityId: 22, id: 222, name: '海曙区'}, {cityId: 31, id: 311, name: '天河区'}, {cityId: 31, id: 312, name: '越秀区'}, {cityId: 32, id: 321, name: '福田区'}, {cityId: 32, id: 322, name: '罗湖区'} ]; // 获取省份元素 var provinceEl = document.getElementById('province'); // 获取城市元素 var cityEl = document.getElementById('city'); // 获取区县元素 var areaEl = document.getElementById('area'); // 初始化省份选项 for (var i = 0; i < provinceData.length; i++) { var option = document.createElement('option'); option.value = provinceData[i].id; option.text = provinceData[i].name; provinceEl.appendChild(option); } // 省份选项变化时更新城市选项 provinceEl.addEventListener('change', function() { // 清空城市选项 cityEl.innerHTML = '<option value="">请选择</option>'; // 获取选中的省份 ID var provinceId = this.value; // 遍历城市数据,添加符合条件的选项 for (var i = 0; i < cityData.length; i++) { if (cityData[i].provinceId == provinceId) { var option = document.createElement('option'); option.value = cityData[i].id; option.text = cityData[i].name; cityEl.appendChild(option); } } // 触发城市选项变化事件,更新区县选项 var event = new Event('change'); cityEl.dispatchEvent(event); }); // 城市选项变化时更新区县选项 cityEl.addEventListener('change', function() { // 清空区县选项 areaEl.innerHTML = '<option value="">请选择</option>'; // 获取选中的城市 ID var cityId = this.value; // 遍历区县数据,添加符合条件的选项 for (var i = 0; i < areaData.length; i++) { if (areaData[i].cityId == cityId) { var option = document.createElement('option'); option.value = areaData[i].id; option.text = areaData[i].name; areaEl.appendChild(option); } } }); ``` 这段代码实现了三级联动,当选择省份时,会动态加载对应的城市选项;当选择城市时,会动态加载对应的区县选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值