javascript二级联动
二级联动在一般的网页中随处可见，一般是地址，比如点击浙江省，随后出现的是杭州市，嘉兴市；点击北京省出现的是朝阳，海淀，而不是出现杭州，嘉兴。
要想实现这个步骤，就要用到javascript来实现。其中原理用到onchange时间。
首先，onchange 事件会在域的内容改变时发生。支持该事件的 JavaScript 对象：fileUpload, select, text, textarea，我们在实现二级联动中正是用到select来完成。
以下是HTML代码，先设置一个select为省，第二个select为市，但是市我们在js中用数组将其与省份连接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript二级联动</title>
</head>
<body>
<select id="province">
<option value="-1">省</option>
<option value="0">北京</option>
<option value="1">浙江</option>
</select>
<select id="city">
</select>
<script src="../js/province.js"></script>
</body>
</html>
以下是js代码
var province = document.getElementById("province");
var city = document.getElementById("city");
var area = [
['朝阳','海淀','北京'], //第0个area的数组。0{0,1,2}
['杭州','海宁'] //第1个area的数组, 1{0.1}
];
function choose(){
var opt = "";
var len = area[province.value]; //如果选择北京0，那么，len=[’朝阳‘，’海淀‘] 这个是连接哪个省份对应着哪个市的市的数组
if(province.value == '-1'){ //因为select的value为-1的时候是‘省’这个字，而不是北京，所以，我们选择这个省的时候对应着让他的市为空
city.innerHTML = opt;
}
for(var i = 0;i < len.length; i++){ //area的数组个数for(i = 0;i < 3; i++)
opt = opt + '<option value ="'+ i +'"> '+ len[i]+ '</option>' //opt = "" + <option value = "0">朝阳(lin[0])</option>,
//opt = <option value = "0">朝阳(lin[0])</option>, +<option value = "1">海淀(lin[1])</option>
//opt = <option value = "0">朝阳(lin[0])</option>, +<option value = "1">海淀(lin[1])</option> +<option value = "2">北京(lin[2])</option>
}
city.innerHTML = opt;
}
province.onchange = function(){
choose();
}
二级联动在一般的网页中随处可见，一般是地址，比如点击浙江省，随后出现的是杭州市，嘉兴市；点击北京省出现的是朝阳，海淀，而不是出现杭州，嘉兴。
要想实现这个步骤，就要用到javascript来实现。其中原理用到onchange时间。
javascript二级联动的更多相关文章
- javascript 二级联动
<html> <head> <title></title> <meta http-equiv="Content-Type" c ...
- Ajxa验证用户和二级联动的实例(五)
验证用户: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
- 利用JavaScript来实现省份—市县的二级联动
所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...
- JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动
JavaScript日历控件开发 概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...
- JavaScript 实现省市二级联动
JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...
- Javascript中二级联动
主要使用到到了地址JSON格式,来做,没有涉及数据库的读取. <!DOCTYPE html><html><head> <meta charset=" ...
- 二级联动，三级联动，初学者，纯javascript，不含jQuery
二级联动: html代码: <body> <select id="province" onchange="getCity(this.options.se ...
- JavaScript+Json写的二级联动
省市区的联动,相当常见 我就不写这么大数据的了,先写个简单的试一试 <!DOCTYPE html> <html> <head> <title></ ...
- asp.net 使用DroDownList来实现二级联动
今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...
随机推荐
- 地图：CLGeocoder地址解析与反地址解析
1.导入系统框架
- javascript 高级程序设计学习笔记（面向对象的程序设计) 2
在调用构造函数时会为实例添加一个指向最初原型的指针,我们可以随时为原型添加属性和方法,并且能在实例中体现出来,但如果是重新了原型对象,那就会切断构造函数与最初原型的联系. function Dog ( ...
- HDU 1194 - Beat the Spread!
给两数之和和两数之差,求两数,两数还必须同奇偶 #include <iostream> using namespace std; int main() { int a,b,t; cin&g ...
- 纯CSS3技术 加载中
你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术 html <div class="loader">加载中...</div> css: 图( ...
- YII学习,实现基于数据库的后台登录,用户体系.
上次研究Yii框架写到了要完成用户登陆系统.这次接着上次的写. 参考官方权威指南和参考手册,外加各种博客文章.历尽千辛万苦,数遍天上滴星星.完成了后台用户登录.这里用到了YII框架的 CUserIde ...
- python学习day10
目录 Twisted Redis RabbitMQ Twisted 事件驱动 事件驱动分为两个部分:第一,注册事件:第二,触发事件. 自定义事件启动框架,命名为:"弑君者" ...
- SAR数据下载网站
1] http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.144.2153&rep=rep1&type=pdf[2] ht ...
- Windows服务程序的原理及实现（服务分为WIN32服务和系统服务）
今天给大家讲下怎样做一个服务程序...本来是想详细讲的,不过写着写着累得要命..很多 地方就没详细...不过代码我加了点注...如果还有一些不明白的自己查下MSDN......便宜 环境,,VC++6 ...
- QT：多线程HTTP下载文件
这里的线程是指下载的通道(和操作系统中的线程不一样),一个线程就是一个文件的下载通道,多线程也就是同时开起好几个下载通道.当服务器提供下载服务时,使用下载者是共享带宽的,在优先级相同的情况下,总服务器 ...
- Ubuntu 安装 Eclipse C/C++开发环境
所需软件清单: 1.eclipse-linuxtools-indigo-SR1-incubation-linux-gtk.tar.gz 2.jre-7u2-linux-i586.tar.gz 先将上述 ...