JavaScript(JS)实现省市联动选择下拉列表

在开发一个应用的时候需要用刀省市联动的下拉列表，网上找到不少。但是要么太复杂，难以修改；要么根本就用不了，最后自己在一个示例中提取出数据，然后自己写了一个，简单易懂，适合新手...

代码如下：

Province_city.js

var objprovince=document.getElementById("province");

var objcity=document.getElementById("city");

var parray=Array(

"北京",

"上海",

"天津",

"重庆",

"河北",

"山西",

"内蒙古",

"辽宁",

"吉林",

"黑龙江",

"江苏",

"浙江",

"安徽",

"福建",

"江西",

"山东",

"河南",

"湖北",

"湖南",

"广东",

"广西",

"海南",

"四川",

"贵州",

"云南",

"西藏",

"陕西",

"甘肃",

"宁夏",

"青海",

"新疆",

"香港",

"澳门",

"台湾"

);

var carray=Array(

"北京,东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆" ,

"上海,黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明" ,

"天津,和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县,大邱庄",

"重庆,万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川",

"石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水",

"太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城",

"呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟" ,

"沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛" ,

"长春,吉林,四平,辽源,通化,白山,松原,白城,延边",

"哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭",

"南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安",

"杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水",

"合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州",

"福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德",

"南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶",

"济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽,博兴",

"郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源",

"武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州",

"长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界",

"广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮",

"南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池",

"海口,三亚",

"成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州",

"贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南",

"昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧",

"拉萨,日喀则,山南,林芝,昌都,阿里,那曲",

"西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛",

"兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南",

"银川,石嘴山,吴忠,固原",

"西宁,海东,海南,海北,黄南,玉树,果洛,海西",

"乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博 尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏",

"香港",

"澳门",

"台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖"

);

objprovince.onchange=function GetCity(){

    var x=this.selectedIndex-1;

    for(i=0;i<objcity.length;i++)

    {

        objcity.remove(i);

    }

    if(x>=0)

    {

        var citylist=carray[x].split(',');

        for(i=0;i<citylist.length;i++)

        {

            objcity.options[i]=new Option(citylist[i],citylist[i]);

        }

    }

    else

    {

        objcity.options[0]=new Option("请选择城市","请选择城市");

    }

};

function GetProvince()

{

    objprovince.options[0]=new Option("请选择省份","请选择省份");

    for(i=0;i<parray.length;i++)

    {

        objprovince.options[i+1]=new Option(parray[i],parray[i]);

    }

}

window.onload=GetProvince();

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="Province_city.js" defer="defer"></script>

</head>

<body>

<select name="province" id="province">

    <option value="请选择城市">请选择省份</option>

</select>

<select name="city" id="city">

    <option value="请选择城市">请选择城市</option>

</select>

</body>

</html>

JavaScript(JS)实现省市联动选择下拉列表的更多相关文章

select省市联动选择城市 asp.net mvc4
本文在 http://www.cnblogs.com/darrenji/p/3606703.html(感谢博主的分享)基础上加入全国各省市,从文件中读取全国省市县,组成省市联动的选择标签在Model ...
JavaScript基础4——省市联动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
纯js代码生成可搜索选择下拉列表
1.因为动态的css楼主写不出来,因此需要引入layui中的css样式:<link rel="stylesheet" href="${ctxStatic}/layu ...
自己编写的仿京东移动端的省市联动选择JQuery插件
概述什么是插件,插件就是即插即用叫插件,很少的配置,很少的代码就可以用都项目里,之所以做这个插件,是因为做了一个省市区的联动,其他项目如果要用怎么办,难道在ctrl+c,ctrl+v?那样做太low ...
JS 实现省市联动
使用 JavaScript 实现选择省份,后面联动改变成相应省份下的市原理很简单: 首先创建两个select下拉框(省.市) 初始化的时候让省都显示出来,市为空 ................. ...
JS实现省市联动效果
实现的效果为:当选择一个省的时候,会自动出现该省下的市级效果图如下: <body> <div>  <span>省份:</s ...
省市联动选择的一个demo，利用vue+webpack+amaze-vue实现省市区联动选择组件
https://github.com/sunshineJi/vue-city-picker
html css javascript 知识点总结 bom js 操作标签文本节点表格各行变色悬停变色省市联动正则
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端
一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

随机推荐

【占位】HihoCoder 1160 : 攻城略地（并查集好题）
攻城略地时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 A.B两国间发生战争了,B国要在最短时间内对A国发动攻击.已知A国共有n个城市(城市编号1, 2, …, n),城 ...
Spring、Spring MVC、Struts2优缺点整理
Spring 及其优点大部分项目都少不了Spring的身影,为什么大家对他如此青睐,而且对他的追捧丝毫没有减退之势呢 Spring是什么: Spring是一个轻量级的DI和AOP容器框架. 说它轻量 ...
Redis设计与实现 (二): 链表
Redis实现为双链表结构, 列表键的底层实现之一就是链表, 发布与订阅, 慢查询, 监视器等功能都用到了链表. Redis本身也使用链表维持多个客户端. 节点定义, 位于 adlist.h/lis ...
Oracle Sql Developer 连接oracle
PL/Sql 初次使用需要配置文件内容,对于我这种Oracle新手来说各种配置有点凌乱,所以果断选择Sql Developer. 选择它是因为初次使用的时候它不用想PL/Sql那样配置文件,而只需要添 ...
【java规则引擎】java规则引擎搭建开发环境
Drools官网:http://www.jboss.org/drools Drools and jBPM consist out of several projects:(Drools软件包提供的几个 ...
在TreeView 控件上，如果双击任何一个节点的checkbox 只会收到一次After_Check事件但是check属性变化两次（从false到true 再从true到false)，请问该如何解决，谢谢！
在TreeView 控件上,如果双击任何一个节点的checkbox 只会收到一次After_Check事件但是check属性变化两次(从false到true 再从true到false),请问该如何解 ...
composer安装特别慢的解决方案
在项目开发的时候有许多新的依赖要按照就需要用到composer 但是由于国内安装下载速度贼慢(国外的网站连接速度太慢,并且随时可能被墙) 安装一个excel扩展(composer require ...
ExcelHandle
using System.Collections.Generic; using System.Data; using System.IO; using System.Linq; using Syste ...
DHCP(四)
确认阶段:即DHCP服务器确认分配级DHCP客户端IP地址的阶段.某个DHCP服务器在收到DHCP客户端发来的DHCP Request报文后,只有DHCP客户端选择的服务器会进行如下操作:如果确认将地 ...
Navicat for MySQL使用手记(下）--实现自动备份数据库
五.备份和还原MySQL数据库在数据库的管理中,备份和还原是必须做认真做的事情,如果疏忽或者做粗糙了,那么一旦数据库故障后果不堪设想,所以Navicat同样也有备份和还原的功能,相比较创建功能,其备 ...

JavaScript(JS)实现省市联动选择下拉列表

JavaScript(JS)实现省市联动选择下拉列表的更多相关文章

随机推荐

热门专题