1、城市联动框

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>城市联动框</title>

 </head>

 <script type="text/javascript">

     function showCity(){

         //维护一个二维数组存储省份对应的城市

         var citys=[[],["广州","深圳","佛山","中山","珠海","东莞"],["武汉","黄石","襄阳","孝感"],["南宁","桂林","贵港","柳州"]];

         //获取省对应的节点

         var proviceNode=document.getElementById("provice");

         //获取省份选中的选项(城市)

         var selectIndex=proviceNode.selectedIndex;

         var cityDatas=citys[selectIndex];

         var cityNode=document.getElementById("city");

         //清空city框的所有option   （注：这一步和下面“设置options的个数”作用效果相同）

         /*var chridren=cityNode.childNodes;

         for(var i=0;i<chridren.length;){

             cityNode.removeChild(chridren[i]);

         }*/

         //设置options的个数。作用：当选择省份时，保证二维数组中只有对应的一个下标里的值

         cityNode.options.length=1;

         //遍历出选择的省份所对应的所有城市

         for(var index=0;index<cityDatas.length;index++){

             var option=document.createElement("option");

             option.innerHTML=cityDatas[index];

             cityNode.appendChild(option);

         }

     }

 </script>

 <body>

     省份:<select id="provice" onChange="showCity()">

         <option>省份</option>

         <option>广东</option>

         <option>湖北</option>

         <option>广西</option>

     </select>&nbsp;&nbsp;&nbsp;

     城市:<select id="city"><option>城市</option></select>

 </body>

 </html>

效果图

原创作者：DSHORE

作者主页：http://www.cnblogs.com/dshore123/

原文出自：https://www.cnblogs.com/dshore123/p/9529035.html

欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的 推荐，或评论，谢谢！）

java基础68 JavaScript城市联动框（网页知识）的更多相关文章

  1. java基础58 JavaScript的几种格式和变量的声明方式（网页知识）

    1.JavaScript的几种格式 1.1.JavaScript的特点 1.跨平台性    2.安全性.(javaScript代码不能直接访问电脑硬盘上的信息) 1.2.Java与javaScript ...

  2. java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）

    1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...

  3. java基础69 JavaScript产生伪验证码（网页知识）

    1.伪验证码 <!doctype html> //软件版本:DW2018版 <html> <head> <meta charset="utf-8&q ...

  4. java基础64 JavaScript中的Arrays数组对象和prototype原型属性（网页知识）

    1.Arrays数组对象的创建方式 方式一: var 变量名=new Array(); //创建一个长度为0的数组. 方式二: var 变量名=new Array(长度); //创建一个指定长度的数组 ...

  5. java基础62 JavaScript中的函数（网页知识）

    1.JavaScript中,函数的格式 function 函数名(形参列表){ 函数体; } 2.JavaScript中,函数需要注意的细节 1.在javaScript中,函数定义形参时,是不能使用v ...

  6. java基础67 JavaScript通过关系找节点、添加附件（网页知识）

    1.通过关系找节点(父子关系,兄弟关系) 1.1.常用方法 parentNode:获取当前元素的父节点.    childNodes:获取当前元素的所有下一级子元素    firstChild:获取当 ...

  7. java基础65 JavaScript中的Window对象（网页知识）

    1.javaScript组成部分 1.EMCAScript(基本语法)    2.BOM(Browser Object Model):浏览器对象模型            浏览器对象模型中的浏览器的各 ...

  8. java基础63 JavaScript中的Number、Math、String、Date对象（网页知识）

    本文知识点(目录): 1.Number对象    2.Math对象    3.String对象    4.Date对象 (日历例子) 1.Number对象 1.1.Number对象的创建方式 方式1: ...

  9. java基础61 JavaScript循环语句之while、do...while、for及for...in循环（网页知识）

    本文知识点(目录): 1.while循环语句    2.do...while循环语句    3.for循环语句    4.for...in循环语句    5.附录1(with语句)    6.附录2( ...

随机推荐

  1. 【poj2411】 Mondriaan's Dream

    http://poj.org/problem?id=2411 (题目链接) 题意 一个$n*m$的网格,用$1*2$的方块填满有多少种方案. Solution 轮廓线dp板子.按格dp,对上方和左方的 ...

  2. phpredis -- Redis Arrays用法

    Redis Arrays 来自地址:https://github.com/phpredis/phpredis/blob/master/arrays.markdown#readme 扩展原文件array ...

  3. scala 的安装 与 IDEA安装使用

    一.安装 scala 1.下载scala-2.11.8.msi 安装包,   首先去官网http://www.scala-lang.org/,然后点击导航栏的DOWNLOAD,进入下载链接:http: ...

  4. 850. 矩形面积 II

    我们给出了一个(轴对齐的)矩形列表 rectangles . 对于 rectangle[i] = [x1, y1, x2, y2],其中(x1,y1)是矩形 i 左下角的坐标,(x2,y2)是该矩形右 ...

  5. 使用traefik作为kubernetes的ingress

    目录 说明 部署 创建一个独立的命名空间 配置rbac授权 配置secret 创建一个configmap用于存放traefik的配置文件 配置traefik的deployment文件 配置服务 通过p ...

  6. 关于RESTful的理解

    如何更好的理解RESTful? (转自https://sanwen8.cn/p/54czrEO.html) 在测试开发中,我们经常接触到API,在调用API时候特别是第三方API时候,我们常常陷入以下 ...

  7. 我的编码习惯 - Controller规范

    原文出处: 晓风轻 请先阅读我这2篇文章 程序员你为什么这么累? 和 我的编码习惯 - 接口定义. 第一篇文章中,我贴了2段代码,第一个是原生态的,第2段是我指定了接口定义规范,使用AOP技术之后最终 ...

  8. CSS3实战之box-sizing

    一般我们都认为border和padding都包含在width或height之内. 而现代标准的浏览器一般都认为width和height仅仅包含content,刨去了border和padding区域. ...

  9. 在cygwin下安装ns2

    首先下载ns2.可以到sourceforge去下载最新的all-in-one版本2.31,url为http://sourceforge.net/project/showfiles.php?group_ ...

  10. 【leetcode 简单】 第一百一十一题 可怜的小猪

    有1000只水桶,其中有且只有一桶装的含有毒药,其余装的都是水.它们从外观看起来都一样.如果小猪喝了毒药,它会在15分钟内死去. 问题来了,如果需要你在一小时内,弄清楚哪只水桶含有毒药,你最少需要多少 ...