java基础68 JavaScript城市联动框（网页知识）
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>
城市:<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城市联动框（网页知识）的更多相关文章
- java基础58 JavaScript的几种格式和变量的声明方式（网页知识）
1.JavaScript的几种格式 1.1.JavaScript的特点 1.跨平台性 2.安全性.(javaScript代码不能直接访问电脑硬盘上的信息) 1.2.Java与javaScript ...
- java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...
- java基础69 JavaScript产生伪验证码（网页知识）
1.伪验证码 <!doctype html> //软件版本:DW2018版 <html> <head> <meta charset="utf-8&q ...
- java基础64 JavaScript中的Arrays数组对象和prototype原型属性（网页知识）
1.Arrays数组对象的创建方式 方式一: var 变量名=new Array(); //创建一个长度为0的数组. 方式二: var 变量名=new Array(长度); //创建一个指定长度的数组 ...
- java基础62 JavaScript中的函数（网页知识）
1.JavaScript中,函数的格式 function 函数名(形参列表){ 函数体; } 2.JavaScript中,函数需要注意的细节 1.在javaScript中,函数定义形参时,是不能使用v ...
- java基础67 JavaScript通过关系找节点、添加附件（网页知识）
1.通过关系找节点(父子关系,兄弟关系) 1.1.常用方法 parentNode:获取当前元素的父节点. childNodes:获取当前元素的所有下一级子元素 firstChild:获取当 ...
- java基础65 JavaScript中的Window对象（网页知识）
1.javaScript组成部分 1.EMCAScript(基本语法) 2.BOM(Browser Object Model):浏览器对象模型 浏览器对象模型中的浏览器的各 ...
- java基础63 JavaScript中的Number、Math、String、Date对象（网页知识）
本文知识点(目录): 1.Number对象 2.Math对象 3.String对象 4.Date对象 (日历例子) 1.Number对象 1.1.Number对象的创建方式 方式1: ...
- java基础61 JavaScript循环语句之while、do...while、for及for...in循环（网页知识）
本文知识点(目录): 1.while循环语句 2.do...while循环语句 3.for循环语句 4.for...in循环语句 5.附录1(with语句) 6.附录2( ...
随机推荐
- Mysql的概述
Mysql的概述 Mysql的安装和初次使用 Mysql的基本概念 Mysql的英文单词是: database,简称 DB. 什么是数据库? 用于存储和管理数据的仓库 数据库的特点: 持久化存储数据. ...
- 解题：USACO10MAR Great Cow Gather
题面 可以水水换根的,不过我是另一种做法:(按点权)找重心,事实上这是重心的一个性质 考虑换根的这个过程,当我们把点放在重心时,我们移动这个点有两种情况: 1.移动到最大的那个子树里 可以发现这个最大 ...
- bzoj 1539: [POI2005]Dwu-Double-row
假设一列交换表示为1,不换表示为0. 身高相同的两个人相当于给其中两列了一个限制条件,要么是两个必须相等,要么一个为零一个为一. 有了关系后我们就可以把每列当成一个点建边,边权为0表示必须相同,1为必 ...
- Docker图形界面管理之DockerUI
DockerUI DockerrUI是一个基于Docker API提供图形化页面简单的容器管理系统,支持容器管理.镜像管理. 1.1 下载镜像 docker pull abh1nav/dockerui ...
- Java基础-集合的嵌套
Java基础-集合的嵌套 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.静态导入 静态导入是在JDK1.5后的新特性,可以减少开发的代码量,但是实际用处是很一般,静态导入的标准 ...
- SFTP上传下载文件、文件夹常用操作
SFTP上传下载文件.文件夹常用操作 1.查看上传下载目录lpwd 2.改变上传和下载的目录(例如D盘):lcd d:/ 3.查看当前路径pwd 4.下载文件(例如我要将服务器上tomcat的日志文 ...
- MAC下 Apache服务器配置
今天做了一个注册登录提交的页面,后续操作需要用到后端的知识 php+Mysql,之前只是有些了解,现在开始具体操作了,首先从配置环境开始.查了好几篇文档与博客,了解了挺多知识. Mac下Apache服 ...
- 动态规划：POJ 3616 Milking Time
#include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...
- Redis学习二：Redis入门介绍
一.入门概述 1.是什么 Redis:REmote DIctionary Server(远程字典服务器) 是完全开源免费的,用C语言编写的,遵守BSD协议,是一个高性能的(key/value)分布式内 ...
- idea 常用快捷使用
一.智能提示 1.快速移动到错误代码 :Shift+F2 或者 f2/ 2.快速修复:Alt+Enter 3.快速生成括号:Ctrl+Shift+Enter 二.重构 1.重构功能汇总:Ctrl+Sh ...