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

代码如下：

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)实现省市联动选择下拉列表的更多相关文章

  1. select省市联动选择城市 asp.net mvc4

    本文在 http://www.cnblogs.com/darrenji/p/3606703.html(感谢博主的分享)基础上加入全国各省市,从文件中读取全国省市县,组成省市联动的选择标签 在Model ...

  2. JavaScript基础4——省市联动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 纯js代码生成可搜索选择下拉列表

    1.因为动态的css楼主写不出来,因此需要引入layui中的css样式:<link rel="stylesheet" href="${ctxStatic}/layu ...

  4. 自己编写的仿京东移动端的省市联动选择JQuery插件

    概述 什么是插件,插件就是即插即用叫插件,很少的配置,很少的代码就可以用都项目里,之所以做这个插件,是因为做了一个省市区的联动,其他项目如果要用怎么办,难道在ctrl+c,ctrl+v?那样做太low ...

  5. JS 实现省市联动

    使用 JavaScript 实现选择省份,后面联动改变成相应省份下的市 原理很简单: 首先创建两个select下拉框(省.市) 初始化的时候让省都显示出来,市为空  ................. ...

  6. JS实现省市联动效果

    实现的效果为:当选择一个省的时候,会自动出现该省下的市级 效果图如下: <body> <div> <!--界面展示--> <span>省份:</s ...

  7. 省市联动选择的一个demo，利用vue+webpack+amaze-vue实现省市区联动选择组件

    https://github.com/sunshineJi/vue-city-picker

  8. html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端

    一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

随机推荐

  1. Django之搭建学员管理系统

    GET请求传参数的方式: /xxx/?k1=v1&k2=v2 ? 前面的是URL ?后面的是请求的参数 多个参数之间用&分隔 POST请求传数据: 是放在请求体里面的 表结构设计. - ...

  2. 剑指Offer面试题：13.合并两个排序的链表

    一 题目:合并两个排序的链表 题目:输入两个递增排序的链表,合并这两个链表并使新链表中的结点仍然是按照递增排序的.例如输入下图中的链表1和链表2,则合并之后的升序链表如链表3所示. 二 代码实现 te ...

  3. 【WCF安全】WCF 自定义授权[用户名+密码+x509证书]

    1.x509证书制作(略) 2.直接贴代码 ----------------------------------------------------------------------服务端----- ...

  4. openfaas 安装（docker swarm 模式）

     备注:为了简单使用的是docker-compose 进行组件的安装  预备环境:    docker  (配置好 swarm  集群模式)  docker-compose     1. docker ...

  5. Oracle cursor_sharing 参数 详解

    一. 官网的说明 http://download.oracle.com/docs/cd/E11882_01/server.112/e17110/initparams042.htm#REFRN10025 ...

  6. 第17篇 shell编程基础（2）

    shell study 1.Exit StatusIf the command executed successfully (or true), the value of $? is zero. If ...

  7. selenium之 chromedriver与chrome版本映射表

    看到网上基本没有最新的chromedriver与chrome的对应关系表,便兴起整理了一份如下,希望对大家有用: chromedriver版本 支持的Chrome版本 v2.40 v66-68 v2. ...

  8. Tair ldb（leveldb存储引擎）实现介绍

    简介 tair 是淘宝自己开发的一个分布式 key/value 存储引擎. tair 分为持久化和非持久化两种使用方式. 非持久化的 tair 可以看成是一个分布式缓存. 持久化的 tair 将数据存 ...

  9. Vue.js：自定义指令

    ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...

  10. (转).Net基础体系和跨框架开发普及

    在园子里看到了一篇关于.net体系及框架开发的文章,感触颇深,身为一个.net程序员,发现自己在这方面的跟进和理解远远不够.转到自己这里,分享的同时方便日后查看. 原文链接: http://www.c ...