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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 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
十天学会php之第五天
2006/10/09 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Django单元测试工具test client使用详解
2019/08/02 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
小学生作文评语集锦
2014/12/25 职场文书
继续教育个人总结
2015/03/03 职场文书
2015年端午节活动方案
2015/05/05 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫