这个是简单也是最基本的下拉框联动的示例，这个示例主要针对那些只有二级联动，且第一级是固定的选项，第二级的内容也比较简单，不刷新的联动，动态的联动需要检索数据库，这个对不需要更新的二级联动比较实用。这里使用了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. 网络配置ipconfig /release、ipconfig /renew

    换了一个工位,换了一根网线,网络就不能用了,网线插在别人电脑上能用,我很是纳闷,这是哪里出问题了呢?通过进入CMD命令操作框,输入以下命令,重新分配IP成功解决问题,耶 ping: ping 的作用是 ...

  2. Spring事务管理之声明式事务管理：基于TransactionProxyFactoryBean的方式

    © 版权声明:本文为博主原创文章,转载请注明出处 案例 - 利用Spring的声明式事务(TransactionProxyFactoryBean)管理模拟转账过程 数据库准备 -- 创建表 CREAT ...

  3. oracle查看用户有哪些权限和角色

    select * from dba_sys_privs t where t.grantee='HR';select * from dba_role_privs t where t.grantee='H ...

  4. Android studio 百度地图开发（3）地图导航

    Android studio 百度地图开发(3)地图导航 email:chentravelling@163.com 开发环境:win7 64位,Android Studio,请注意是Android S ...

  5. linux无线网络配置_转

    转自:http://www.cnblogs.com/dartagnan/archive/2010/12/05/2003521.html   一位资生linux 原文:http://www.hpl.hp ...

  6. FMM和BMM的python代码实现

    FMM和BMM的python代码实现 FMM和BMM的编程实现,其实两个算法思路都挺简单,一个是从前取最大词长度的小分句,查找字典是否有该词,若无则分句去掉最后面一个字,再次查找,直至分句变成单词或者 ...

  7. 使用Highcharts实现柱状图展示

    第一步 新建页面line.html,引入HighCharts核心js文件 <script type="text/javascript" src="../../js/ ...

  8. 不依任何赖第三方，单纯用vue实现Tree 树形控件

    这几天接到一个需求,里面有需要做一个属性组件,找的第三方的,但是不能完全满足我的需求,有这时间,我就自己做个小轮子吧. 先看效果图(红点之前用的字体图标,是个对号,这里为了方便,用圆圈代替了选中状态, ...

  9. ASP.NET动态网站制作（22）-- ADO.NET（1）

    前言:这节课开始真正地学习WEB开发,ADO.NET就是一组允许.NET开发人员使用标准的.机构化的,甚至无连接的方式与数据交互的技术.所属的类库为:System.Data.dll. 内容: 1.AD ...

  10. CentOS Linux解决网卡报错Bringing up interface eth0.....

    问题描述:在VMware里克隆出来的CentOS Linux,开机执行命令:ifconfig...没有看到eth0网卡.然后重启网卡又报以下错误:Bringing up interface eth0: ...