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+FSO遍历文件夹下文件并显示
Mar 07 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
微信小程序实现下拉加载更多商品
Dec 29 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
php常量详细解析
2015/10/27 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python requests模块实例用法
2019/02/11 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
外包公司软件测试工程师
2014/11/01 面试题
学生会竞选自荐信
2013/10/12 职场文书
美术社团活动总结
2014/06/27 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
感恩教师节主题班会
2015/08/12 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python