这个是简单也是最基本的下拉框联动的示例，这个示例主要针对那些只有二级联动，且第一级是固定的选项，第二级的内容也比较简单，不刷新的联动，动态的联动需要检索数据库，这个对不需要更新的二级联动比较实用。这里使用了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. 根域名服务器 根服务器一般指根域名服务器 （DNS）

    Why There Are Only 13 DNS Root Name Servers -------------------------------------------------------- ...

  2. Laravel 数据库实例教程 —— 使用DB门面操作数据库

    Laravel支持多种数据库,包括MySQL.Postgres.SQLite和SQL Server,在Laravel中连接数据库和查询数据库都非常简单,我们可以使用多种方式与数据库进行交互,包括原生S ...

  3. Maven环境下搭建SSH框架之Spring整合Struts2

    © 版权声明:本文为博主原创文章,转载请注明出处 1.搭建环境 Struts2:2.5.10 Spring:4.3.8.RELEASE 注意:其他版本在某些特性的使用上可能稍微存在差别 2.准备工作 ...

  4. Hibernate学习之类级别注解

    © 版权声明:本文为博主原创文章,转载请注明出处 类级别注解: 1. @Entity 实体:表示映射实体类,使用@Entity时必须指定实体类的主键属性 @Entity(name="&quo ...

  5. 403/you don't have the permission to access on this server

    Localhost/index.php出现 错误403 you don't have the permission to access on this server 现在已经解决,特将方法与大家分享. ...

  6. C语言中的main函数以及main函数是如何被调用的

    main函数是C语言中比较特殊的函数,C程序总是从main函数开始执行,main函数的原型是: int main(int argc, char *argv[]); 其中argc是命令行参数的个数,ar ...

  7. CentOS6.9 下编译安装MySQL5.7.19

    官网:https://www.mysql.com/ 下载地址:https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.19.tar.gz 一.准备工作 ...

  8. phpcms控制器变量分配到模板

    跟TP.CI框架不同,phpcmsv9分配变量的方式是: 控制器中声明了变量$a='zrp'或$data=array('aa','bb'); 在模板中就可以直接输出: 字符串:{$a} 数组:遍历 { ...

  9. phpstudy配置php7.1.11 + phpstudy nginx伪静态

    切记要把新的php版本配到环境变量,cmd才会生效 php7.1.11下载地址 http://windows.php.net/download/ 下载之后,解压. 重名的为php-7.1.11-nts ...

  10. 闪屏Flash动画

    这个也比较简单,之前也做过不少 今天这个就为了方便日后使用,希望大家都可以借鉴借鉴啊! @ViewInject(R.id.linMain) private LinearLayout linMain; ...