这个是简单也是最基本的下拉框联动的示例，这个示例主要针对那些只有二级联动，且第一级是固定的选项，第二级的内容也比较简单，不刷新的联动，动态的联动需要检索数据库，这个对不需要更新的二级联动比较实用。这里使用了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. BAT都来参加的 DevOps Master 培训

    原文:http://www.sohu.com/a/128425731_262549 自高效运维社区开设 DevOps Master 认证培训以来,已经总共有120多人拿到证书,其中在今年春节后,有68 ...

  2. [译]GLUT教程 - 创建和关闭子窗体

    Lighthouse3d.com >> GLUT Tutorial >> Subwindows >> Creating and Destroying Subwind ...

  3. Eclipse配置总结

       按照公司要求,开发环境使用Eclipse Juno版本,需要安装maven插件和RTC插件.      经过一下午的尝试,总结经验教训:        1.eclipse安装maven的m2ec ...

  4. CSDN开源夏令营 基于Compiz的switcher插件设计与实现之前期准备 git的简单使用

    因为项目的代码须要上传到git上.就须要学习一下git的使用了. 我初步接触了一下git,准备用此帖来记录git的学习,此帖会随着我对git了解的深入动态更新. 一.GIT的介绍 1.概述:git是一 ...

  5. R中导入excel乱码的解决办法

    本文操作系统环境为win10,使用Rstdio. 要说明windows下在使用Rstdio的时候,在使用xlsx包,导入excel表乱码的解决办法. 1.我们先安装xlsx包 install.pack ...

  6. 01 Memcached 安装与介绍

      一:Memcached 介绍 ()官网网址:www.mamcached.org () 主要功能是:高性能,分布式的内存对象缓存系统. ()Nosql不仅仅是关系型数据库,显著特点key value ...

  7. UFLDL深度学习笔记 （五）自编码线性解码器

    UFLDL深度学习笔记 (五)自编码线性解码器 1. 基本问题 在第一篇 UFLDL深度学习笔记 (一)基本知识与稀疏自编码中讨论了激活函数为\(sigmoid\)函数的系数自编码网络,本文要讨论&q ...

  8. 【Atheros】内核调试及网卡加载等问题小结

    我做的其他很多工作就比较有针对性了,不是什么大众性的问题,比如加统计代码.实现自己的速率调整算法或者加一些自己的控制什么的,就不再单独介绍了,最后呢再罗列一些小问题,供参考. 1. 加载模块(执行wi ...

  9. SVN版本号控制软件-图片含义具体解释

    转载请注明出处:http://blog.csdn.net/zhuwentao2150/article/details/51195154 自己定义SVN图标显示风格 SVN的图标是能够自己定义风格的 右 ...

  10. <button>标签也能提交表单问题

    如何避免<button>标签也能提交表单的问题: 只需加上一个属性:type='button'即可:如<button type="button"> < ...