JavaScript 三级联动
附件连接下载地址:http://files.cnblogs.com/files/CaktyRiven/js.zip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select name="" id="province">
<option value="">请选择省</option>
</select>
<select name="" id="city">
<option value="">请选择市</option>
</select>
<select name="" id="county">
<option value="">请选择区/县</option>
</select>
<script type="text/javascript" src="china.js"></script>
<script type="text/javascript">
//获取省、市、县/区、节点
var body = document.body;
var province =document.getElementById('province');
var city = document.getElementById('city');
var county = document.getElementById("county");
//将chain.js里面的字符串通过JSON转换成对象
var chinaArea = JSON.parse(chinaArea);
//通过点访问法访问对象,将结果赋给定义好的省列表
var provinceList =chinaArea.china.province;
//for循环遍历省份列表长度
for(var i = 0; i < provinceList.length; i++) {
//新建option节点
var option = document.createElement("option");
//将通过中括号访问法访问对象属性["-name"]中的省份名赋给option。
option.innerHTML = provinceList[i]["-name"];
//将option添加到province 的select下拉列表里
province.appendChild(option); }
//定义城市列表为空
var cityList=null;
//利用onchang方法获取下拉列表中的对象
province.onchange=function(){
//清空城市/区县列表
city.innerHTML ="<option>请选择市</option>";
county.innerHTML="<option>请选择区/县</option>";
//通过this.selectedIndex获取select列表的下标
if(this.selectedIndex >0){
//同理,通过点访问法和中括号访问法访问对象,将获取的城市赋给cityList
cityList = chinaArea.china.province[this.selectedIndex -1].city;
//同理、遍历城市列表的长度、新建option、赋值、并添加
for(var i=0; i<cityList.length; i++){
var option = document.createElement("option");
option.innerHTML = cityList[i]["-name"];
city.appendChild(option); }
}
} //县区的的做法同城市的原理一致,都是通过访问获得县区长度及name,再遍历县区长度,相应赋值 city.onchange = function(){
county.innerHTML="<option>请选择区/县</option>";
if(this.selectedIndex >0){
for(var i=0;i<cityList[this.selectedIndex -1].county.length;i++){
var option = document.createElement("option");
option.innerHTML =cityList[this.selectedIndex -1].county[i]["-name"];
county.appendChild(option);
}
}
} </script>
</body>
</html
2017.05.02 -- 新增 ,js+jquery,省市区三级联动,封装函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select name="" id="province">
<option value="">请选择</option>
</select>
<select name="" id="city">
<option value="">请选择</option>
</select>
<select name="" id="county">
<option value="">请选择</option>
</select>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript">
//将chain.js里面的字符串通过JSON转换成对象
var chinaArea = JSON.parse(chinaArea);
console.log(chinaArea);
//通过点访问法访问对象,将结果赋给定义好的省列表
var provinceList =chinaArea.china.province; function address(piv,cit,coy){
//获取省、市、县/区、节点
var province =$(piv);
var city = $(cit);
var county = $(coy);
//for循环遍历省份列表长度
for(var i = 0; i < provinceList.length; i++) {
//新建option节点
var option = document.createElement("option");
//将通过中括号访问法访问对象属性["-name"]中的省份名赋给option。
option.innerHTML = provinceList[i]["-name"];
//将option添加到province 的select下拉列表里
// province.appendTo(option);
province.append(option); }
//定义城市列表为空
var cityList =null;
//利用onchang方法获取下拉列表中的对象
province.change(function(){
//清空城市/区县列表
city.html ("<option>请选择市</option>");
county.html("<option>请选择区/县</option>");
//通过this.selectedIndex获取select列表的下标
if(this.selectedIndex >0){
//同理,通过点访问法和中括号访问法访问对象,将获取的城市赋给cityList
cityList = chinaArea.china.province[this.selectedIndex -1].city;
//同理、遍历城市列表的长度、新建option、赋值、并添加
for(var i=0; i<cityList.length; i++){
var option = document.createElement("option");
option.innerHTML = cityList[i]["-name"];
city.append(option);
}
}
})
//县区的的做法同城市的原理一致,都是通过访问获得县区长度及name,再遍历县区长度,相应赋值
city.change(function(){
county.innerHTML="<option>请选择区/县</option>";
if(this.selectedIndex >0){
for(var i=0;i<cityList[this.selectedIndex -1].county.length;i++){
var option = document.createElement("option");
option.innerHTML =cityList[this.selectedIndex -1].county[i]["-name"];
county.append(option);
}
}
})
}
address(province,city,county);
</script>
</body>
</html>
JavaScript 三级联动的更多相关文章
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
- 原生JavaScript的省市县三级联动
三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> < ...
- JavaScript实现省市区的三级联动
JavaScript实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...
- 时间操作(JavaScript版)—年月日三级联动(默认显示系统时间)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/35263317 这个功能 ...
- 【JavaScript&jQuery】省市区三级联动
HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...
- javascript 省、市、地县三级联动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD&g ...
- 原生javascript制作省市区三级联动详细教程
多级联动下拉菜单是前端常见的效果,省市区三级联动又属于其中最典型的案例.多级联动一般都是与数据相关联的,根据数据来生成和修改联动的下拉菜单.完成一个多级联动效果,有助于增强对数据处理的能力. 本实例以 ...
- 原生javascript实现省市区三级联动
腾讯IP分享计划(http://ip.qq.com/)有个现成的三级联动功能,查看源码后发现可以直接使用其单独的JS文件(http://ip.qq.com/js/geo.js). 分析后发现自己需要写 ...
- 二级联动,三级联动,初学者,纯javascript,不含jQuery
二级联动: html代码: <body> <select id="province" onchange="getCity(this.options.se ...
随机推荐
- WindowsPhone8.1RT建立空白应用挂起没反应的解决方案
wp8.1下, 建立空白应用后遇到的问题:想要实现保存.提取数据都无法成功 在退出程序后无法进入到OnNavigatedFrom()中去. 网上说要手动的Invoke OnSuspending事件. ...
- iOS开发——高级篇——远程音频、视频播放
一.远程音频播放(<AVFoundation/AVFoundation.h>) #import <AVFoundation/AVFoundation.h> /** 播放器 */ ...
- Google疯了,竟然这样!
导读 一个小问题:你每天做什么事?当然了,好多事情,但是我可以指出一件事,你几乎每天都会用 Google 搜索,我说的对吗?现在,如果你是一位 Linux 用户,这里有另外一个问题:如果你甚至不用离开 ...
- Java Native Interface 编程系列一
本文是<Java Native Interface Programmer's Guide and Specification>的读书笔记 Java Native Interface可以让编 ...
- Java高并发同步Volatile的使用
引言: 在多线程并发编程中synchronized和Volatile都扮演着重要的角色,Volatile是轻量级的synchronized,它在多处理器开发中保证了共享变量的“可见性”. 可见性的意思 ...
- poj 3264(线段树)
http://poj.org/problem?id=3264 初学线段可以做的水题,也是线段树的基础运用.也是我的第一个线段树的题. 题意:在区间范围内的最大值减去最小值 思路:线段树记录下每个区间内 ...
- ServiceStack.Redis订阅发布服务的调用
1.Redis订阅发布介绍 Redis订阅发布是一种消息通信模式:发布者(publisher)发送消息,订阅者(Subscriber)接受消息.类似于设计模式中的观察者模式. 发布者和订阅者之间使用频 ...
- ACM/ICPC 之 ACM计算机工厂-EK算法(POJ3436)
题意有点难读懂 //网络流-EK算法-ACM计算机工厂-构图重点 //Time:0Ms Memory:208K #include <iostream> #include<cstrin ...
- JavaSE基础01
JavaSE基础篇01 ------从今天开始,我就学习正式java了,O(∩_∩)O哈哈~,请大家多指教哦 一.Windows常见的dos命令 操作dos命令: win7 --->开始 --- ...
- PAT A 1022. Digital Library (30)【结构体排序检索】
https://www.patest.cn/contests/pat-a-practise/1022 直接模拟, 输入,按id排序,检索 #include <iostream> #incl ...