JS实现下拉列表的二级联动
这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单,不刷新的联动,动态的联动需要检索数据库,这个对不需要更新的二级联动比较实用。这里使用了javascript来联动第二级下拉框。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="JavaScript" type="text/javascript">
//定义了城市的二维数组,里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
var city=[
["北京","天津","上海","重庆"],
["南京","苏州","南通","常州"],
["福州","福安","龙岩","南平"],
["广州","潮阳","潮州","澄海"],
["兰州","白银","定西","敦煌"]
];
function getCity(){
//获得省份下拉框的对象
var sltProvince=document.form1.province;
//获得城市下拉框的对象
var sltCity=document.form1.city;
//得到对应省份的城市数组
var provinceCity=city[sltProvince.selectedIndex - 1];
//清空城市下拉框,仅留提示选项
sltCity.length=1;
//将城市数组中的值填充到城市下拉框中
for(var i=0;i<provinceCity.length;i++){
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
}
}
</script>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="" name="form1">
<SELECT NAME="province" onChange="getCity()">
<OPTION VALUE="0">请选择所在省份 </OPTION>
<OPTION VALUE="直辖市">直辖市 </OPTION>
<OPTION VALUE="江苏省">江苏省 </OPTION>
<OPTION VALUE="福建省">福建省 </OPTION>
<OPTION VALUE="广东省">广东省 </OPTION>
<OPTION VALUE="甘肃省">甘肃省 </OPTION>
</SELECT>
<SELECT NAME="city">
<OPTION VALUE="0">请选择所在城市 </OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
如果对js不大熟悉,可以看看下面关于js处理select对象的内容:
1、使用selectedIndex属性获取当前选项的索引
下拉框的选项是一个线性数组,每个选项都有一个索引,selectedIndex表示当前被选中的选项的索引号。结合options属性,可以得到被选中的option对象,从而对其做进一步的处理。当下拉框可多选时,selectedIndex属性返回第一个被选中的索引。
selectedIndex是个只读的属性,想把通过索引指定的下拉框的项设置为选中状态,可以设置option对象的selected=true来实现。
2、为select对象添加一个选项
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
new Option(provinceCity[i],provinceCity[i])表示创建一个值为provinceCity[i],文本为provinceCity[i]的option对象,sltCity是页面上的city对象,i+1指定新添选项的位置。
3、清空一个select对象
要将下拉框的所有选项删除有两种方法,
第一种方法就是遍历删除:
2 for(var i=0;i<l;i++){
3 myselect.options[i]=null;
4 }
第二种方法比较简单,因此一般都使用此方法:
JS实现下拉列表的二级联动的更多相关文章
- js小例子之二级联动
联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...
- 纯js做的select二级联动
分步阅读 select 联动用到的范围很广,下面介绍一下简单的二级联动 方法/步骤 做一个简单的html页面,用于显示select联动,如图所示: 设置js,点击一级选择项时,创建其下对应的二 ...
- Mybatis + js 实现下拉列表二级联动
Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...
- js实现二级联动下拉列表菜单
二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...
- 原生js实现二级联动下拉列表菜单
二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...
- 原生js二级联动
今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...
- jQuery下拉列表二级联动插件
jQuery下拉列表二级联动插件的视图代码: <!doctype html> <html lang="en"> <head> <meta ...
- Select标签下拉列表二级联动级联
首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...
- xml+js+html的二级联动
首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...
随机推荐
- Loadrunner 关于参数赋值取值的操作
1.参数的赋值和取值 lr_save_string("hello world","param"); lr_eval_string("{param}&q ...
- hdu3336解读KMP算法的next数组
查看原题 题意大致是:给你一个字符串算这里面全部前缀出现的次数和.比方字符串abab,a出现2次.ab出现2次,aba出现1次.abab出现1次.总计6次. 而且结果太大.要求对1007进行模运算. ...
- Windows 清除系统垃圾文件
@echo off echo 正在清除系统垃圾文件,请稍等...... del /f /s /q %systemdrive%\*.tmp del /f /s /q %systemdrive%\*._m ...
- 网络相关系列之四:数据解析之SAX方式解析XML数据
一.XML和Json数据的引入: 通常情况下.每一个须要訪问网络的应用程序都会有一个自己的server.我们能够向server提交数据,也能够从server获取数据.只是这个时候就有一个问题,这些数据 ...
- MySQL 用户与权限管理
MySQL权限系统的主要功能是证实连接到一台给定主机的用户,而且赋予该用户在数据库上的相关DML,DQL权限.MySQL存取控制包括2个阶段,一是server检查是否同意你连接:二是假定你能连接,se ...
- Linux下性能分析工具汇总
来自:http://os.51cto.com/art/201104/253114.htm 本文讲述的是:CPU性能分析工具.Memory性能分析工具.I/O性能分析工具.Network性能分析工具. ...
- linux 参数内核
优化Linux内核参数 转自:http://www.centoscn.com/CentOS/config/2013/0804/992.html vim /etc/sysctl.conf 1.net ...
- IE hack 条件语句
只在固定IE版本下执行 将以下代码放在head标签中,在script标签中写js即可 <!--[if IE 8]> <script> console.log("in ...
- json性能测试
http://www.open-open.com/lib/view/open1434377191317.html
- Redis(Windows安装方法与Java调用实例 & 配置文件参数说明 & Java使用Redis所用Jar包 & Redis与Memcached区别 & redis-cli.exe命令及示例)
Windows下Redis的安装使用 0.前言 因为是初次使用,所以是在windows下进行安装和使用,参考了几篇博客,下面整理一下 1.安装Redis 官方网站:http://redis.io/ 官 ...