三级级联(js实现)
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 实现效果：选择省会出现相应的县下拉框，同时市的下拉框改变-->
<script type="application/javascript">
//二维数组存放市的信息
var shi =[["丽水市","杭州市"],["新乡","郑州"]];
//三维数组存放县的信息
var xianes = [[["云和","景宁"],["桐庐","原阳"]],[["卫辉","下乡"],["中原","二七"]]];
//所选的省值
var proIndex = 0;
function sgc(){
//获得所选择的省的下拉框值
var pro = document.getElementById("sheng");
//获得市的下拉框
var cit = document.getElementById("shi");
//将省的value与市的一维数组下标所对应
proIndex = pro.value-1;
//清空市下拉框中原有的值
cit.options.length = 1;
//通过for循环往下拉框中添加市的信息
for(var i = 0;i < shi[proIndex].length;i++){
var op = document.createElement("option");
var citName = document.createTextNode(shi[proIndex][i]);
op.value = i;
op.appendChild(citName);
cit.appendChild(op);
}
}
//市的值改变后改变县的值
function sic(){
var are = document.getElementById("xian");
var cit = document.getElementById("shi");
are.options.length = 1;
//通过proIndex获得所选的省的值作为县的数组的一维数组下标，通过cit.value作为县数组的二维数组下标，遍历获得数组值
for(var i = 0;i<xianes[proIndex][cit.value].length;i++){
var op = document.createElement("option");
var areName = document.createTextNode(xianes[proIndex][cit.value][i]);
op.value = i;
op.appendChild(areName);
are.appendChild(op);
}
}
</script>
//onchange():控件的value值改变后调用方法
<select id = "sheng" onchange = "sgc();">
<option>----省份---</option>
<option value = "1">浙江省</option>
<option value = "2">河南省</option>
</select>
<select id = "shi" onchange="sic();">
<option>---市区---</option>
</select>
<select id = "xian" >
<option>---县区---</option>
</select>
</body>
</html>
三级级联(js实现)的更多相关文章
- KendoUi中KendoDropDownList控件的使用——三级级联模块的实现
1. 应用需求 在权限系统开发中除了以上数据表关系的设计之外.比較麻烦的地方是级联模块在页面的展示,因为设计中最多是控制到三级,因此三级级联模块的展示.编辑等页面操作是须要解决的问题,这里採用Kend ...
- 对jQuery ajax三级级联的简单研究
最近写程序的时候经常遇到使用ajax获取数据的问题,刚好昨天遇到ajax写三级级联问题,自己写了一个简单的级联.对于服务端获取数据的就不多写了,客户端的ajax发送请求我在这里详细说一下,因为我也没专 ...
- zTree实现地市县三级级联DAO接口实现
zTree实现地市县三级级联DAO接口实现 ProvinceDaoImpl.java: /** * @Title:ProvinceDaoImpl.java * @Package:com.gwtjs.d ...
- zTree实现地市县三级级联报错（一）
zTree实现地市县三级级联 1.详细报错例如以下: java.lang.IllegalStateException: Failed to load ApplicationContext at org ...
- 关于时间的操作（JavaScript版）——年月日三级级联（默认依次显示请选择年、请选择月和请选择日）
这篇博客和前一篇博客基本同样,仅仅是显示的默认值不同: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&quo ...
- zTree实现地市县三级级联Action类
zTree实现地市县三级级联Action类 ProvinceAction.java: /** * @Title:ProvinceAction.java * @Package:com.gwtjs.str ...
- zTree实现地市县三级级联Service接口測试
zTree实现地市县三级级联Service接口測试 ProvinceServiceTest.java: /** * @Title:ProvinceServiceTest.java * @Package ...
- 三级级联查询省份名称和编码（保证名称不重复）的SQL语句
三级级联查询省份名称和编码(保证名称不重复)的SQL语句 1.省份.地市和县级数据库表 2.SQL语句 SELECT DISTINCT t.`province_name`,t.`province_co ...
- zTree实现地市县三级级联报错（三）
zTree实现地市县三级级联报错(三) 1.具体报错如下 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] ...
随机推荐
- ISC2016训练赛 phrackCTF--Classical CrackMe
测试文件:https://static2.ichunqiu.com/icq/resources/fileupload/phrackCTF/REVERSE/CrackMe.rar 1.准备 获得信息 3 ...
- java 快速开发平台 有代码生成器 springmvc SSM后台框架源码
. 权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限 角色(基础权限): 分角色组和角色,独立分配菜单权限和增删改查权限. 按钮权限: 给角色分配按钮权限.2 ...
- js中对象的属性名和属性值
代码 /** * 对象的属性名 * - 对象的属性名不强制遵循标识符的命名规范,可以是任意的名字,但在开发中 * 尽量遵循标识符的命名规范 */ // 创建对象obj1 var obj1 = new ...
- Spark集成Kafka实时流计算Java案例
package com.test; import java.util.*; import org.apache.spark.SparkConf; import org.apache.spark.Tas ...
- CtfStudying之SSH私钥泄露
8/23/19 SSH私钥泄露 对于只是给定一个对应ip地址的靶场机器,我们需要对其进行扫描,探测其开放服务.我原来理解的渗透就是找到目标的漏洞,然后利用这些(这种)漏洞,最后拿到机器的最高权限:其实 ...
- C# 获取系统环境数据
using System; using System.Data; using System.Text.RegularExpressions; using System.Threading; names ...
- Redis 复制功能详解
Redis 复制功能的几个重要方面: 1. 一个Master可以有多个Slave:2. Redis使用异步复制.从2.8版本开始,Slave会周期性(每秒一次)发起一个Ack确认复制流(replica ...
- 两个list 合并后去除掉重复removeAll()的，然后再随机获取最后list中的 几个值
public static void test1(){ String s1="1,2,5,3,6,9"; String n1[]=s1.split(","); ...
- iOS多媒体总结&进入后台播放音乐
1. 播放mp3需要导入框架,AVFoundation支持音频文件(.caf..aif..wav..wmv和.mp3)的播放. #import <AVFoundation/AVFoundatio ...
- php array_slice()函数 语法
php array_slice()函数 语法 作用:在数组中根据条件取出一段值,并返回.大理石平台支架 语法:array_slice(array,start,length,preserve) 参数: ...