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. TreeView控件使用

    treeView1.SelectedNode = treeView1.Nodes[0];  //选中当前treeview控件的根节点为当前节点添加子节点:  TreeNode tmp; tmp = n ...

  2. 代码的坏味道（4）——过长参数列(Long Parameter List)

    坏味道--过长参数列(Long Parameter List) 特征 一个函数有超过3.4个入参. 问题原因 过长参数列可能是将多个算法并到一个函数中时发生的.函数中的入参可以用来控制最终选用哪个算法 ...

  3. Visual Studio 2013中因SignalR的Browser Link引起的Javascript错误一则

    众所周知Visual Studio 2013中有一个由SignalR机制实现的Browser Link功能,意思是开发人员可以同时使用多个浏览器进行调试,当按下IDE中的Browser Link按钮后 ...

  4. T4 模板自动生成带注释的实体类文件 - 只需要一个 SqlSugar.dll

    生成实体就是这么简单,只要建一个T4文件和 文件夹里面放一个DLL. 使用T4模板教程 步骤1 创建T4模板 ,一定要自已新建,把T4代码复制进去,好多人因为用我现成的T4报错(原因不明) 点击添加文 ...

  5. linux源码分析（四）－start_kernel－cgroup

    前置:这里使用的linux版本是4.8,x86体系. cgroup_init_early(); 聊这个函数就需要先了解cgroup. cgroup概念 这个函数就是初始化cgroup所需要的参数的.c ...

  6. EF 的 霸气配置，秒杀一切

    通过EF 作为操作数据库的工具有一段时间了,也做了几个相对不大的项目,慢慢的也对EF的使用摸索出来了一些规则,虽然说不是技术难点,但是,我说的是但是,能够提高我们开发效率的棉花糖有时我们还是必须要吃的 ...

  7. CSS技巧（一）：清除浮动

    什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高 ...

  8. asp.net 验证控件

    前台文件 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1. ...

  9. Java日期时间操作的一些方法

    1. 获得Calendar实例: Calendar c = Calendar.getInstance(); 2. 定义日期/时间的格式: SimpleDateFormat sdf =new Simpl ...

  10. ahjesus HttpQuery

    /// <summary> /// 有关HTTP请求的辅助类 /// </summary> public class HttpQuery { private static re ...