三级级联(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} ] ...
随机推荐
- axios动态数据的获取
跨域:前端处理.后端处理 前端方法:代理 后端加header 第一步:全局安装axios cnpm install axios --save-dev 第二步: methods:{ ...
- 在navcat中清空数据后，设置id归零方法
写后台完成后,需要清空Mysql数据库中的测试数据,但是后面新增的数据,一直是以原来所删除数据的最大id为增量基本,比如,对于一些id敏感的项,十分不便,如图 原有10条数据,清空后,新增一两条,手动 ...
- 奇葩问题：Invalid bound statement (not found): cn.zss.zsdemo.mapper.RoleMapper.selectByPrimaryKey
使用mybatis,遇到Invalid bound statement (not found): cn.zss.zsdemo.mapper.RoleMapper.selectByPrimaryKey ...
- JavaScript中准确的判断数据类型
在 ECMAScript 规范中,共定义了 7 种数据类型,分为基本类型和引用类型两大类. 其中: 基本类型:String.Number.Boolean.Symbol.Undefined.Null ...
- 基于firebird的数据转存
功能:使用于相同的表从一个数据库转存到另一数据库: 方式:直连fdb并加载django,引用django的model完成: 原因:1.select * from *** 返回的数有很多None,直接i ...
- Read-Only Tables 只读表
Put a table into read-only mode,which prevents DDL or DML changes during table maintenance Put the ...
- paste 合并文件
1.命令功能 paste 用于合并文件的列,把每个文件以列对列的方式,一列列地加以合并. 2.语法格式 paste option file 参数选项 参数 参数说明 -d 指定间隔符合并文件(默 ...
- struts2的相关知识（实现原理、拦截器）
struts2的实现原理 客户端初始化一个指向Servlet容器(例如Tomcat)的请求 这个请求经过一系列的过滤器(Filter)(这些过滤器中有一个叫做ActionContextCleanUp的 ...
- Java中Comparable接口和Comparator接口的简单用法
对象比较器 1.Comparable接口 此接口强行对实现它的每个类的对象进行整体排序,这种排序成为类的自然排序,类的compareTo方法称为类的自然比较方法. 代码示例 import java.u ...
- 06.队列、python标准库中的双端队列、迷宫问题
class QueueUnderflow(ValueError): """队列为空""" pass class SQueue: def __ ...