转至:http://www.jb51.net/article/41556.htm

实现原理:

  set_city("省名称",市select对象);

  判断市select对象是否为空,不为空遍历以省为名称的数组,数组中存放着对应的市,将所有市放入市select对象的option中

<script language="javascript"> 

cities = new Object(); 

cities['台湾']=new Array('台北','台南','其他'); 

cities['马来西亚']=new Array('Malaysia'); 

cities['北京']=new Array('北京'); 

cities['上海']=new Array('上海'); 

cities['天津']=new Array('天津'); 

cities['重庆']=new Array('重庆'); 

cities['河北省']=new Array('石家庄', '张家口', '承德', '秦皇岛', '唐山', '廊坊', '保定', '沧州', '衡水', '邢台', '邯郸'); 

cities['山西省']=new Array('太原', '大同', '朔州', '阳泉', '长治', '晋城', '忻州', '吕梁', '晋中', '临汾', '运城'); 

cities['辽宁省']=new Array('沈阳', '朝阳', '阜新', '铁岭', '抚顺', '本溪', '辽阳', '鞍山', '丹东', '大连', '营口', '盘锦', '锦州', '葫芦岛'); 

cities['吉林省']=new Array('长春', '白城', '松原', '吉林', '四平', '辽源', '通化', '白山', '延边'); 

cities['黑龙江省']=new Array('哈尔滨', '齐齐哈尔', '黑河', '大庆', '伊春', '鹤岗', '佳木斯', '双鸭山', '七台河', '鸡西', '牡丹江', '绥化', '大兴安'); 

cities['江苏省']=new Array('南京', '徐州', '连云港', '宿迁', '淮阴', '盐城', '扬州', '泰州', '南通', '镇江', '常州', '无锡', '苏州'); 

cities['浙江省']=new Array('杭州', '湖州', '嘉兴', '舟山', '宁波', '绍兴', '金华', '台州', '温州', '丽水'); 

cities['安徽省']=new Array('合肥', '宿州', '淮北', '阜阳', '蚌埠', '淮南', '滁州', '马鞍山', '芜湖', '铜陵', '安庆', '黄山', '六安', '巢湖', '池州', '宣城'); 

cities['福建省']=new Array('福州', '南平', '三明', '莆田', '泉州', '厦门', '漳州', '龙岩', '宁德'); 

cities['江西省']=new Array('南昌', '九江', '景德镇', '鹰潭', '新余', '萍乡', '赣州', '上饶', '抚州', '宜春', '吉安'); 

cities['山东省']=new Array('济南', '聊城', '德州', '东营', '淄博', '潍坊', '烟台', '威海', '青岛', '日照', '临沂', '枣庄', '济宁', '泰安', '莱芜', '滨州', '菏泽'); 

cities['河南省']=new Array('郑州', '三门峡', '洛阳', '焦作', '新乡', '鹤壁', '安阳', '濮阳', '开封', '商丘', '许昌', '漯河', '平顶山', '南阳', '信阳', '周口', '驻马店'); 

cities['湖北省']=new Array('武汉', '十堰', '襄攀', '荆门', '孝感', '黄冈', '鄂州', '黄石', '咸宁', '荆州', '宜昌', '恩施', '襄樊'); 

cities['湖南省']=new Array('长沙', '张家界', '常德', '益阳', '岳阳', '株洲', '湘潭', '衡阳', '郴州', '永州', '邵阳', '怀化', '娄底', '湘西'); 

cities['广东省']=new Array('广州', '清远', '韶关', '河源', '梅州', '潮州', '汕头', '揭阳', '汕尾', '惠州', '东莞', '深圳', '珠海', '江门', '佛山', '肇庆', '云浮', '阳江', '茂名', '湛江'); 

cities['海南省']=new Array('海口', '三亚'); 

cities['四川省']=new Array('成都', '广元', '绵阳', '德阳', '南充', '广安', '遂宁', '内江', '乐山', '自贡', '泸州', '宜宾', '攀枝花', '巴中', '达川', '资阳', '眉山', '雅安', '阿坝', '甘孜', '凉山'); 

cities['贵州省']=new Array('贵阳', '六盘水', '遵义', '毕节', '铜仁', '安顺', '黔东南', '黔南', '黔西南'); 

cities['云南省']=new Array('昆明', '曲靖', '玉溪', '丽江', '昭通', '思茅', '临沧', '保山', '德宏', '怒江', '迪庆', '大理', '楚雄', '红河', '文山', '西双版纳'); 

cities['陕西省']=new Array('西安', '延安', '铜川', '渭南', '咸阳', '宝鸡', '汉中', '榆林', '商洛', '安康'); 

cities['甘肃省']=new Array('兰州', '嘉峪关', '金昌', '白银', '天水', '酒泉', '张掖', '武威', '庆阳', '平凉', '定西', '陇南', '临夏', '甘南'); 

cities['青海省']=new Array('西宁', '海东', '西宁', '海北', '海南', '黄南', '果洛', '玉树', '海西'); 

cities['内蒙古']=new Array('呼和浩特', '包头', '乌海', '赤峰', '呼伦贝尔盟', '兴安盟', '哲里木盟', '锡林郭勒盟', '乌兰察布盟', '鄂尔多斯', '巴彦淖尔盟', '阿拉善盟'); 

cities['广西']=new Array('南宁', '桂林', '柳州', '梧州', '贵港', '玉林', '钦州', '北海', '防城港', '南宁', '百色', '河池', '柳州', '贺州'); 

cities['西藏']=new Array('拉萨', '那曲', '昌都', '林芝', '山南', '日喀则', '阿里'); 

cities['宁夏']=new Array('银川', '石嘴山', '吴忠', '固原'); 

cities['新疆']=new Array('乌鲁木齐', '克拉玛依', '喀什', '阿克苏', '和田', '吐鲁番', '哈密', '博尔塔拉', '昌吉', '巴音郭楞', '伊犁', '塔城', '阿勒泰'); 

cities['香港']=new Array('香港'); 

cities['澳门']=new Array('澳门'); 

function set_city(province, city) 

{ 

var pv, cv; 

var i, ii; 

pv=province.value; 

cv=city.value; 

city.length=1; 

if(pv=='0') return; 

if(typeof(cities[pv])=='undefined') return; 

for(i=0; i<cities[pv].length; i++) 

{ 

ii = i+1; 

city.options[ii] = new Option(); 

city.options[ii].text = cities[pv][i]; 

city.options[ii].value = cities[pv][i]; 

} 

} 

</script> 

<SELECT name="sheng" id="to_cn" onchange="set_city(this, document.getElementById('city')); WYL();" class=login_text_input > 

<option value=0>请选择</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> 

<option value=广西>广西</option> 

<option value=西藏>西藏</option> 

<option value=宁夏>宁夏</option> 

<option value=新疆>新疆</option> 

<option value=香港>香港</option> 

<option value=澳门>澳门</option>
</SELECT> - 市
<select id="city" class=login_text_input name="shi"> <option value=0>请选择</option> </select>

[转]省市二级联动(纯js实现)的更多相关文章

  1. 【原创】省市二级联动纯javascript

    // 北京 上海 天津 重庆 河北 山西 内蒙古 辽宁 吉林 黑龙江 江苏 浙江 安徽 福建 江西 山东 河南 湖北 湖南 广东 广西 海南 四川 贵州 云南 西藏 陕西 甘肃 宁夏 青海 新疆 香港 ...

  2. 省市二级联动--使用app-jquery-cityselect.js插件

    只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...

  3. 省市二级联动(原生JS)

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  4. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  5. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  6. jQuery_完成省市二级联动

    当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...

  7. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  8. iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装

    之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...

  9. js省市二级联动

    html: <script src="js/city.js"></script> ...... <body> <div class=&qu ...

随机推荐

  1. C#基本知识点-Readonly和Const的区别

    什么是静态常量(Const)和动态常量(Readonly)   先解释下什么是静态常量(Const)以及什么是动态常量(Readonly). 静态常量(Const)是指编译器在编译时候会对常量进行解析 ...

  2. poj 1201 Intervals(差分约束)

    做的第一道差分约束的题目,思考了一天,终于把差分约束弄懂了O(∩_∩)O哈哈~ 题意(略坑):三元组{ai,bi,ci},表示区间[ai,bi]上至少要有ci个数字相同,其实就是说,在区间[0,500 ...

  3. JavaScript学习笔记(备忘录)

    ===运算符 判断数值和类型是否相等.如: console.log('s'==='s') //输出trueconsole.log('1'===1) //输出false

  4. centos系统常用软件环境搭建

    yum源制作grub常见问题:http://linux.chinaunix.net/techdoc/beginner/2008/01/04/975921.shtml 系统安装: 2 软件安装:yum ...

  5. [Papers]NSE, $\p_3u$, Lebesgue space [Cao, DCDSA, 2010]

    $$\bex \p_3\bbu\in L^p(0,T;L^q(\bbR^3)),\quad \frac{2}{p}+\frac{3}{q}=2,\quad \frac{27}{16}\leq q\le ...

  6. java web 学习八(HttpServletResponse对象2)

    一.HttpServletResponse常见应用——生成验证码 1.1.生成随机图片用作验证码 生成图片主要用到了一个BufferedImage类,

  7. memcache分布式部署的原理分析

    下面本文章来给各位同学介绍memcache分布式部署的原理分析,希望此文章对你理解memcache分布式部署会有所帮助哦.   今天在封装memcache操作类库过程中,意识到一直以来对memcach ...

  8. Linux基本命令(1)管理文件和目录的命令

    Linux管理文件和目录的命令 命令 功能 命令 功能 pwd 显示当前目录 ls 查看目录下的内容 cd 改变所在目录 cat 显示文件的内容 grep 在文件中查找某字符 cp 复制文件 touc ...

  9. Fitnesse-20140630与RestFixture-3.1编译与运行步骤

    为了能使RestFixture-3.1在Fitnesse-20140630中正确打印测试结果,准备修改RestFixture. 1.下载并编译Fitnesse-20140630 以下步骤以在64位Wi ...

  10. duilib relativepos属性导致控件错误的bug修复

    转载请说明出处,谢谢~~ 我在仿酷狗音乐播放器的开发日志系列里,曾经提到了这个bug,文章地址为:http://blog.csdn.net/zhuhongshu/article/details/381 ...