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. Android Studio之BuildConfig类

    https://blog.csdn.net/lvxiangan/article/details/71601451 Android Studio开发中,把一个module输出打包为jar文件,我们会发现 ...

  2. Codeforces Round #532

    以后不放水题了 C.NN and the Optical Illusion 复习一下高中数学即可 $\frac{ans}{ans+r}=\sin \frac{\pi}{n}$ 解方程 #include ...

  3. centos6.5搭建LVS+Keepalived

    1.配置LVS负载调度器 (1)为eth0配置IP地址,为eth0:0配置VIP地址. vi /etc/sysconfig/network-scripts/ifcfg-eth0 …… DEVICE=e ...

  4. 【Asp.net入门5-02】创建数据模型和存储库

  5. Java入门:基础算法之求数组元素的和

    本程序计算数组中所有元素的和. 代码1:数组元素由程序内部初始化 /** * @author: 理工云课堂 * @description: 求数组元素的和 */ class SumOfArray{ p ...

  6. Django中url()

    使用django的时候,如果我们希望我们编写的view可以被正常访问,就需要配置url. 在django的官方文档中,url()的例子如下: polls/urls.py from django.con ...

  7. js便携小方法,你值得拥有

    引言: 本章没有深奥的讲解js一些底层原理,比如this指针.作用域.原型啦,涉及的都是一些有利于平时开发时简化代码,提高执行效率,或者说可以当做一种经验方法来使用,篇幅都不长,小步快跑的让你阅读完整 ...

  8. redis 批量删除keys

    “mf*” 为你的key  redis-cli -h 127.0.0.1 -p 6379 -a yourpassword keys “mf*” |xargs  redis-cli -h 127.0.0 ...

  9. LintCode 204: Singleton

    LintCode 204: Singleton 题目描述 单例是最为最常见的设计模式之一.对于任何时刻,如果某个类只存在且最多存在一个具体的实例,那么我们称这种设计模式为单例.例如,对于class M ...

  10. android安全技术技能清单

    大部分android apk都是在裸奔.大部分android程序员,有一些懂得代码混淆,然而,这东西也不靠谱.除去第三方提供的服务的服务的话,大部分android apk就是在裸奔.不过,使用第三方的 ...