最简单js代码实现select二级联动下拉菜单

本文实例为大家分享了js实现select二级联动下拉菜单，供大家参考，具体内容如下

<%@ 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对象
要将下拉框的所有选项删除有两种方法，
第一种方法就是遍历删除：

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

第二种方法比较简单，因此一般都使用此方法：
myselect.length=0;

赞 (0)

相关推荐

  • ASP+JS三级联动下拉菜单[调用数据库数据]

    网上三级菜单多是多但是代码都比较烦,我这个应该说还是比较直观的:'肯定先要连接数据库了,不用说了 '数据库结构 '类别1表名称:a  字段:ID,Name  说明:ID为主键是类别1的ID值,Name为类别1的名称 '类别2表名称:aa  字段:ID,aID,Name  说明:ID为主键是类别2的ID值,aID为所属类别1的ID值,Name为类别2的名称 '类别3表名称:aaa  字段:ID,aID,aaID,Name  说明:ID为主键是类别3的ID值,aID为所属类别1的ID值,aaID为所

  • jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动

    jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动

    利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: 复制代码 代码如下: var mail={ //初始化 init:{ //初始化数据 initdata:{ did:'', ttitle:'', sendpassword:'', description:'' }, //初始化事件 initevent:{ DataEvent:function(){ $("#did").unbind("change");//获取一级

  • 省市区三级联动下拉框菜单javascript版

    实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat

  • javascript支持区号输入的省市二级联动下拉菜单

    省市二级联动下拉菜单,增加了区号输入.多组选项共用一组数据. 选择地区,可以获取区号,填写区号自动选取地区. 某些地市的区号收集中. 省份 选择城区 1)inti(0);findarea();"> 省份 选择城区 1)inti(1);findarea();"> var areaList={ "北京":[["选择城区","10"],["东城区",""],["西城区&q

  • 从QQ网站中提取的纯JS省市区三级联动菜单

    从QQ网站中提取的纯JS省市区三级联动菜单

    我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下:  何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js 使用方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 直接使用QQ的省市区数据

  • 琥珀无限级联动菜单-JavaScript版

    琥珀网 - javascript无限级联动菜单 body, td { font-family: 宋体; font-size: 12px; } /*---------------------------------------------------------------------------*\ | Subject: JavaScript三级联动菜单 | | Version: 1.0 | | Author: 琥珀[hopesoft] | | FileName: HPMenu.js | | C

  • 全国省市二级联动下拉菜单 js版

    本文实例为大家分享了js实现二级联动下拉菜单的具体代码,供大家参考,具体内容如下 js代码部分: /* * 全国二级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined&

  • js实现的全国省市二级联动下拉选择菜单完整实例

    js实现的全国省市二级联动下拉选择菜单完整实例

    本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】

    JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】

    本文实例讲述了JS实现经典的中国地区三级联动下拉菜单功能.分享给大家供大家参考,具体如下: 1.首先是js文件(area.js): function Dsy() { this.Items = {}; } Dsy.prototype.add = function(id,iArray) { this.Items[id] = iArray; } Dsy.prototype.Exists = function(id) { if(typeof(this.Items[id]) == "undefined&q

  • javascript实现多级联动下拉菜单的方法

    本文实例讲述了javascript实现多级联动下拉菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var arrItems1 = new Array(); var arrItemsGrp1 = new Array(); arrItems1[3] = "列二"; arrItemsGrp1[3] = 1; arrItems1[4] = &qu

  • jsp从数据库获取数据填充下拉框实现二级联动菜单的方法

    本文实例讲述了jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.分享给大家供大家参考,具体如下: 项目告一段落,现在将遇到的比较实用的东西记录下来,写了多遍了,谨记于此,以备查看! 1.首先在数据库中获取第一个下拉框的数据: <s:select listKey="tsFrom" id="t_tsfrom" cssClass="required" listValue="tsFrom" cssStyle="w

  • javascript实现省市区三级联动下拉框菜单

    javascript实现省市区三级联动下拉框菜单

    本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/

  • JS实多级联动下拉菜单类，简单实现省市区联动菜单！

    作者:ybcola 这段js代码是很久以前的作品了,应该在一年以前吧!当时是在做一个农村人才管理系统的时候遇到的问题,因为系统要求参选择并通过后台添加省市区县甚至到乡镇村队,而在对人才的信息进行修改时要求用下拉列表进行选择,并且每个人才来源可能是省市,或者省市区县,或者一直取队都要选择!那时第一反映就是找网上是否有现成的代码,找到一个最常用的就是省市二级联动,那时那段js代码在网上随处可见,可是拿过来对我来说没用,因为我需要的是一个多级联通并且可以自由扩展的代码!最终还是自己动手写了JS代码.

随机推荐