这个是简单也是最基本的下拉框联动的示例，这个示例主要针对那些只有二级联动，且第一级是固定的选项，第二级的内容也比较简单，不刷新的联动，动态的联动需要检索数据库，这个对不需要更新的二级联动比较实用。这里使用了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对象
要将下拉框的所有选项删除有两种方法，
第一种方法就是遍历删除：

1 var l=myselect.length;
2 for(var i=0;i<l;i++){
3 myselect.options[i]=null;
4 }

第二种方法比较简单，因此一般都使用此方法：

myselect.length=0;

JS实现下拉列表的二级联动的更多相关文章

  1. js小例子之二级联动

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  2. 纯js做的select二级联动

    分步阅读 select 联动用到的范围很广,下面介绍一下简单的二级联动 方法/步骤   做一个简单的html页面,用于显示select联动,如图所示:   设置js,点击一级选择项时,创建其下对应的二 ...

  3. Mybatis + js 实现下拉列表二级联动

    Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...

  4. js实现二级联动下拉列表菜单

    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...

  5. 原生js实现二级联动下拉列表菜单

    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...

  6. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

  7. jQuery下拉列表二级联动插件

    jQuery下拉列表二级联动插件的视图代码: <!doctype html> <html lang="en"> <head> <meta ...

  8. Select标签下拉列表二级联动级联

    首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...

  9. xml+js+html的二级联动

    首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...

随机推荐

  1. KB 2670838 make beginner suprise!

    My project works fine and use pix for them many time without crash.One day, I start my project with ...

  2. EFFECTIVE JAVA 类和接口

    第十六条:复合优先于继承 //这是一个不好的类---执行的结果 addCount = 4(addAll的实现依赖于HashSet的add方法,InstrumentHashSet方法重写了add方法有执 ...

  3. Qemu事件处理机制简介

    Qmeu 采用了基于事件驱动的架构,所有的事件都在一个事件循环(event loop)中被处理,系统中默认的事件循环是在main-loop.c 中的主循环(main loop).我们也可以使用 –ob ...

  4. Atitit.跨平台预定义函数 魔术方法 魔术函数 钩子函数 api兼容性草案 v2 q216  java c# php js.docx

    Atitit.跨平台预定义函数 魔术方法 魔术函数 钩子函数 api兼容性草案 v2 q216  java c# php js.docx 1.1. 预定义函数 魔术方法 魔术函数是什么1 1.2. & ...

  5. swift中代理的使用

    1.首先定义一份协议. protocol HttpToolProrocol{ //1.代理方法,将server返回的字典传递给调用者 func didRecieveResults(result:NSD ...

  6. 【边做项目边学Android】小白会遇到的问题--Appcompat_V7问题

    问题描写叙述: 首先遇到的问题就是adt版本号的选择,sdk版本号的选择: adt按非小白朋友说的选了最新的ADT-22.3.0,同一时候我也把sdk更新到了最新的(嗯.这个要fanqiang,或者找 ...

  7. shiro集成encache

    针对多频次或者几乎不变的大数量的数据,我们可以通过缓存来实现,具体的比如说权限认证,这个,每次操作都需要权限认证,所以,这里添加encache注解.具体的认证过程是: 1,用户第一次访问用户权限信息, ...

  8. IEnumerable, IEnumerator接口

    IEnumerable接口 // Exposes the enumerator, which supports a simple iteration over a non-generic collec ...

  9. SQL_为表和列加凝视

    ***********************************************声明*************************************************** ...

  10. CrtmpServer支持Android与IOS进行RTMP直播遇到的_checkbw问题

    在进行移动端视频直播项目时遇到的问题.手机端在推的流时的是没问题的,主要如今是IOS和安卓连接CRtmpServer后进行播放时checkBW过不了,出现异常:NetConnection.Call.F ...