JavaScript 省市级联效果

 <!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>

     <title>省市级联效果</title>

     <script type="text/javascript">

         function show() {

             var citys = new Array();

             citys["湖北省"] = ["襄樊市", "武汉市", "随州市", "荆门市", "黄石市", "恩施市", "咸宁市", "仙桃市", "十堰市", "孝感市", "利川市"];

             citys["湖南省"] = ["长沙市", "吉首市", "湘潭市", "益阳市", "津市市", "洪江市", "怀化市", "冷水江市", "衡阳市", "郴州市", "永州市", "邵阳市", "岳阳市"];

             citys["广东省"] = ["广州市", "深圳市", "佛山市", "汕头市", "珠海市", "韶关市", "江门市", "湛江市", "惠州市", "中山市", "东莞市"];

             citys["北京市"] = ["朝阳区", "丰台区", "崇文区", "宣武区", "海淀区", "顺义区", "平谷区", "怀柔区", "房山区", "东城区", "西城区"];

             document.getElementById("shi").options.length = 1;

             var sheng = document.getElementById("sheng").value;

             var newCity;

             if (sheng != "-=请选择=-") {

                 for (var i = 0; i < citys[sheng].length; i++) {

                     newCity = new Option(citys[sheng][i], citys[sheng][i]);

                     document.getElementById("shi").options.add(newCity);

                 }

             }

         }

     </script>

 </head>

 <body>

     <div>

         <select id="sheng" onchange="show()">

             <option value="-=请选择=-">-=请选择=-</option>

             <option value="湖北省">湖北省</option>

             <option value="湖南省">湖南省</option>

             <option value="广东省">广东省</option>

             <option value="北京市">北京市</option>

         </select>

         <select id="shi">

             <option>-=请选择=-</option>

         </select>

     </div>

 </body>

 </html>

JavaScript 省市级联效果的更多相关文章

  1. JavaScript实现省市级联效果实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. javascript中的省市级联效果

    学习javascript的时候都遇到过这样的需求,不仅是省市,还有其他的一些场景,看看关键的代码有哪些吧. <head runat="server"> <titl ...

  3. 纯js实现省市级联效果

    我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...

  4. JavaScript学习笔记- 省市级联效果

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. 省市级联.net

    初学javascript,编译省市级联,使用json在一般处理程序中编译,利用ajax传递数据到web前台 <html xmlns="http://www.w3.org/1999/xh ...

  6. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

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

  7. js省市级联实现

    js省市级联实现. for [element] in [collection] 用于循环下标,常用于json for(index in arr){ console.info("下标:&quo ...

  8. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号，在Asp.net 获取不到的，解决办法 .Net程序员 初学Ubuntu ，配置Nignix 夜深了，写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

  9. Ajax异步刷新省市级联

    省市级联在web前端用户注册使用非常广泛.Ajax异步刷新省市级联.如图:选择不同的区,自动加载相应的街. <TD class=field>位 置:</TD> <TD&g ...

随机推荐

  1. java多线程--几个多线程面试题小结

    自学了一段时间的多线程知识,尝试了做了几个编程题,发现想象中很简单的功能,自己真写起来要花费远超自己想象的功夫,知识点易学,不易用啊. 面试题1:编写程序实现,子线程循环10次,接着主线程循环20次, ...

  2. Angularjs promise对象解析

    1.先来看一段Demo,看完这个demo你可以思考下如果使用$.ajax如何处理同样的逻辑,使用ng的promise有何优势? var ngApp=angular.module('ngApp',[]) ...

  3. Android之assets资源

    assets目录下存放的原生资源文件,通过getAssets()方法获取. 使用: InputStream inputStream; try { inputStream = getAssets().o ...

  4. 去哪儿搜索引擎QSearch设计与实现

    本次演讲主要介绍的是QSearch的具体设计和应用场景,并分别解答以下几个问题:QSearch与开源垂直软件Lucene的区别:具体业务的实现技巧.以及QSearch的具体设计:如何通过Partial ...

  5. “SqlDateTime 溢出。必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:59:59 PM 之间。”

    原因: .NET中  DateTime最小值为: 0001-1-1 0:00:00 数据库中DateTime最小值为: 1753-1-1 0:00:00, 很明显:.NET中的最小值超出了数据库时间类 ...

  6. JS围棋半成品

    // = 0 && cheseArray[x][y-1] == chessState.None){ return true; } if(y + 1 = 0 &&ches ...

  7. Not a git repository (or any of the parent directories): .git

    今天准备在win10上面安装git,想把代码发布到github中,按照教程的方法一步一步下来,当配置完ssh和用户名,邮箱之后,发现下拉不下来github中的代码,出现如下错误. 说是没有发现仓储,很 ...

  8. MS SQL Server中数据表、视图、函数/方法、存储过程是否存在判断及创建

    前言 在操作数据库的时候经常会用到判断数据表.视图.函数/方法.存储过程是否存在,若存在,则需要删除后再重新创建.以下是MS SQL Server中的示例代码. 数据表(Table) 创建数据表的时候 ...

  9. bootstrap-简单实用的垂直手风琴滑动菜单列表特效

    前端: <html lang="zh"> <head> <meta charset="UTF-8"> <meta ht ...

  10. 如何实现一个php框架系列文章【1】如何组织文件

    1. 组织文件布局应该考虑什么问题 前后端分离 各业务模块分离但方便互相调用 上传文件安全性 方便接入第三方类库 如图所示 框架入口文件 uct/index.php 框架目录         uct/ ...