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. (十九)WebGIS中I查询的原理及设计(包含AGS、GeoServer、Supermap)

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 我们在使用arcmap时,经常会用到被称为I查询的工具.具体 ...

  2. 【LeetCode】House Robber III（337）

    1. Description The thief has found himself a new place for his thievery again. There is only one ent ...

  3. ThinkPHP中的快捷函数小结

    U() 制作url地址的快捷函数 C(名称) 获得配置变量(convertion.php config.php)信息C(名称,值) 设置配置变量信息 L() 获得语言变量信息E() 给页面输出错误信息 ...

  4. 开源网站.NETMVC+ Layui+SqlSugar+RestSharp

    SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...

  5. Linux日志定时清理

    linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...

  6. PR&AE插件开发遇到的一个坑

    经过一段时间的摸索,对Adobe Premiere Pro和After Effects系列插件的开发工作有了一定的掌握.如今公司需要针对Premiere Pro和After Effects开发另外一款 ...

  7. 使用abp模板创建解决方案

    前言 ABP官网(http://www.aspnetboilerplate.com/),本地环境 sql server EXPRESS +vs2013 通过官网生成 module zero 解决方案模 ...

  8. 背水一战 Windows 10 (13) - 绘图: Stroke, Brush

    [源码下载] 背水一战 Windows 10 (13) - 绘图: Stroke, Brush 作者:webabcd 介绍背水一战 Windows 10 之 绘图 Stroke - 笔划 Brush ...

  9. jqgrid（转载）

    一.主要API接口getGridParam.setGridParam: getGridParam方法: getGridParam("url"): 获取当前的AJAX的URL get ...

  10. MySQL 相关总结

    MySQL 优秀在线教程 RUNOOB-SQL 教程 MySQL 常用命令 导出操作 -- 某数据库 全部表 结构和数据 mysqldump -h192.168.8.152 -uroot -p man ...