JavaScript省市联动实现代码


Posted in Javascript onFebruary 15, 2014
<html>
<head>
    <title>JS省市二级联动菜单,整理收集。</title>
</head>
<body bgcolor="#FFFFFF" alink="#333333" vlink="#333333" link="#333333" topmargin="0"
    leftmargin="0" onload="init()">
    <form  method="post" name="creator" enctype="multipart/form-data">
    <script language="javascript" type="text/javascript">
        var where = new Array(35);
        function comefrom(loca, locacity) { this.loca = loca; this.locacity = locacity; }
        where[0] = new comefrom("请选择省份名", "请选择城市名");
        where[1] = new comefrom("北京", "|东城|西城|崇文|宣武|朝阳|丰台|石景山|海淀|门头沟|房山|通州|顺义|昌平|大兴|平谷|怀柔|密云|延庆");  
        where[2] = new comefrom("上海", "|黄浦|卢湾|徐汇|长宁|静安|普陀|闸北|虹口|杨浦|闵行|宝山|嘉定|浦东|金山|松江|青浦|南汇|奉贤|崇明"); 
        where[3] = new comefrom("天津", "|和平|东丽|河东|西青|河西|津南|南开|北辰|河北|武清|红挢|塘沽|汉沽|大港|宁河|静海|宝坻|蓟县");
        where[4] = new comefrom("重庆", "|万州|涪陵|渝中|大渡口|江北|沙坪坝|九龙坡|南岸|北碚|万盛|双挢|渝北|巴南|黔江|长寿|綦江|潼南|铜梁|大足|荣昌|壁山|梁平|城口|丰都|垫江|武隆|忠县|开县|云阳|奉节|巫山|巫溪|石柱|秀山|酉阳|彭水|江津|合川|永川|南川");
        where[5] = new comefrom("河北", "|石家庄|邯郸|邢台|保定|张家口|承德|廊坊|唐山|秦皇岛|沧州|衡水");
        where[6] = new comefrom("山西", "|太原|大同|阳泉|长治|晋城|朔州|吕梁|忻州|晋中|临汾|运城");
        where[7] = new comefrom("内蒙古", "|呼和浩特|包头|乌海|赤峰|呼伦贝尔盟|阿拉善盟|哲里木盟|兴安盟|乌兰察布盟|锡林郭勒盟|巴彦淖尔盟|伊克昭盟");
        where[8] = new comefrom("辽宁", "|沈阳|大连|鞍山|抚顺|本溪|丹东|锦州|营口|阜新|辽阳|盘锦|铁岭|朝阳|葫芦岛");
        where[9] = new comefrom("吉林", "|长春|吉林|四平|辽源|通化|白山|松原|白城|延边");
        where[10] = new comefrom("黑龙江", "|哈尔滨|齐齐哈尔|牡丹江|佳木斯|大庆|绥化|鹤岗|鸡西|黑河|双鸭山|伊春|七台河|大兴安岭");
        where[11] = new comefrom("江苏", "|南京|镇江|苏州|南通|扬州|盐城|徐州|连云港|常州|无锡|宿迁|泰州|淮安");
        where[12] = new comefrom("浙江", "|杭州|宁波|温州|嘉兴|湖州|绍兴|金华|衢州|舟山|台州|丽水");
        where[13] = new comefrom("安徽", "|合肥|芜湖|蚌埠|马鞍山|淮北|铜陵|安庆|黄山|滁州|宿州|池州|淮南|巢湖|阜阳|六安|宣城|亳州");
        where[14] = new comefrom("福建", "|福州|厦门|莆田|三明|泉州|漳州|南平|龙岩|宁德");
        where[15] = new comefrom("江西", "|南昌市|景德镇|九江|鹰潭|萍乡|新馀|赣州|吉安|宜春|抚州|上饶");
        where[16] = new comefrom("山东", "|济南|青岛|淄博|枣庄|东营|烟台|潍坊|济宁|泰安|威海|日照|莱芜|临沂|德州|聊城|滨州|菏泽");
        where[17] = new comefrom("河南", "|郑州|开封|洛阳|平顶山|安阳|鹤壁|新乡|焦作|濮阳|许昌|漯河|三门峡|南阳|商丘|信阳|周口|驻马店|济源");
        where[18] = new comefrom("湖北", "|武汉|宜昌|荆州|襄樊|黄石|荆门|黄冈|十堰|恩施|潜江|天门|仙桃|随州|咸宁|孝感|鄂州");
        where[19] = new comefrom("湖南", "|长沙|常德|株洲|湘潭|衡阳|岳阳|邵阳|益阳|娄底|怀化|郴州|永州|湘西|张家界");
        where[20] = new comefrom("广东", "|广州|深圳|珠海|汕头|东莞|中山|佛山|韶关|江门|湛江|茂名|肇庆|惠州|梅州|汕尾|河源|阳江|清远|潮州|揭阳|云浮");
        where[21] = new comefrom("广西", "|南宁|柳州|桂林|梧州|北海|防城港|钦州|贵港|玉林|南宁地区|柳州地区|贺州|百色|河池");
        where[22] = new comefrom("海南", "|海口|三亚");
        where[23] = new comefrom("四川", "|成都|绵阳|德阳|自贡|攀枝花|广元|内江|乐山|南充|宜宾|广安|达川|雅安|眉山|甘孜|凉山|泸州");
        where[24] = new comefrom("贵州", "|贵阳|六盘水|遵义|安顺|铜仁|黔西南|毕节|黔东南|黔南");
        where[25] = new comefrom("云南", "|昆明|大理|曲靖|玉溪|昭通|楚雄|红河|文山|思茅|西双版纳|保山|德宏|丽江|怒江|迪庆|临沧");
        where[26] = new comefrom("西藏", "|拉萨|日喀则|山南|林芝|昌都|阿里|那曲");
        where[27] = new comefrom("陕西", "|西安|宝鸡|咸阳|铜川|渭南|延安|榆林|汉中|安康|商洛");
        where[28] = new comefrom("甘肃", "|兰州|嘉峪关|金昌|白银|天水|酒泉|张掖|武威|定西|陇南|平凉|庆阳|临夏|甘南");
        where[29] = new comefrom("宁夏", "|银川|石嘴山|吴忠|固原");
        where[30] = new comefrom("青海", "|西宁|海东|海南|海北|黄南|玉树|果洛|海西");
        where[31] = new comefrom("新疆", "|乌鲁木齐|石河子|克拉玛依|伊犁|巴音郭勒|昌吉|克孜勒苏柯尔克孜|博尔塔拉|吐鲁番|哈密|喀什|和田|阿克苏");
        where[32] = new comefrom("香港", "");
        where[33] = new comefrom("澳门", "");
        where[34] = new comefrom("台湾", "|台北|高雄|台中|台南|屏东|南投|云林|新竹|彰化|苗栗|嘉义|花莲|桃园|宜兰|基隆|台东|金门|马祖|澎湖");
        where[35] = new comefrom("其它", "|北美洲|南美洲|亚洲|非洲|欧洲|大洋洲");
        function select() {
            with (document.creator.province) { var loca2 = options[selectedIndex].value; }
            for (i = 0; i < where.length; i++) {
                if (where[i].loca == loca2) {
                    loca3 = (where[i].locacity).split("|");
                    for (j = 0; j < loca3.length; j++) { with (document.creator.city) { length = loca3.length; options[j].text = loca3[j]; options[j].value = loca3[j]; var loca4 = options[selectedIndex].value; } }
                    break;
                }
            }
            document.creator.newlocation.value = loca2 + loca4;
        }
        function init() {
            with (document.creator.province) {
                length = where.length;
                for (k = 0; k < where.length; k++) { options[k].text = where[k].loca; options[k].value = where[k].loca; }
                options[selectedIndex].text = where[0].loca; options[selectedIndex].value = where[0].loca;
            }
            with (document.creator.city) {
                loca3 = (where[0].locacity).split("|");
                length = loca3.length;
                for (l = 0; l < length; l++) { options[l].text = loca3[l]; options[l].value = loca3[l]; }
                options[selectedIndex].text = loca3[0]; options[selectedIndex].value = loca3[0];
            }
        } 
    </script>
    <font color="#000000"><b>来自:</b> 省份<select name="province" onchange="select()"></select>城市<select
        name="city" onchange="select()">
    </select>
        我在<input type="text" name="newlocation" maxlength="12" size="12" style="font-weight: bold" />
    </font>
    </form>
</body>
</html>
Javascript 相关文章推荐
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
基于form-data请求格式详解
Oct 29 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
js与运算符和或运算符的妙用
Feb 14 #Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 #Javascript
jquery中交替点击事件的实现代码
Feb 14 #Javascript
javascript获取form里的表单元素的示例代码
Feb 14 #Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 #Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 #Javascript
jQuery获取和设置表单元素的方法
Feb 14 #Javascript
You might like
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
React Router基础使用
2017/01/17 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python中条件判断语句的简单使用方法
2015/08/21 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
Python 切分数组实例解析
2019/11/07 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
小学英语教学反思
2014/01/30 职场文书
入学申请自荐信范文
2014/02/26 职场文书
地理科学专业自荐信
2014/09/01 职场文书
2015年新教师工作总结
2015/04/28 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL