js下拉列表二级联动

60 阅读 0 评论 40 点赞

我是靠谱客的博主畅快香水，最近开发中收集的这篇文章主要介绍js下拉列表二级联动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

学了JS也有一段时间了，今天把JS中较为重要的下拉列表二级联动记录一下。所谓二级联动，就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。好比我有两个下拉列表，第一列表是选择省份，那么我选择某一个省份，那么另一个列表也会对应显示该省份的城市。

如上图所示，我选择了河北省，那么对应的城市列表中就会出现相应的城市。代码如下:

js:

cities = new Object();
cities['河北省']=new Array('石家庄', '张家口市', '承德市', '秦皇岛市', '唐山市', '廊坊市', '保定市', '沧州市', '衡水市', '邢台市', '邯郸市');
cities['山西省']=new Array('太原市', '大同市', '朔州市', '阳泉市', '长治市', '晋城市', '忻州地区', '吕梁地区', '晋中市', '临汾地区', '运城地区');
function set_city(province, city)
{
var pv, cv;
var i, ii;
pv=province.value;
cv=city.value;
city.length=1;
if(pv=='0') return;
if(typeof(cities[pv])=='undefined') return;
for(i=0; i<cities[pv].length; i++)
{
ii = i+1;
city.options[ii] = new Option();
city.options[ii].text = cities[pv][i];
city.options[ii].value = cities[pv][i];
}
}

jsp:

<form name="form1" action="" method="get">
<select name="province" onChange="set_city(this, this.form.city);">
<option value="0">选择省</option>
<option value="河北省">河北省</option>
<option value="山西省">山西省</option>
</select>
<select
name="city" id="citys">
<option value="0">选择城市</option>
</select>
</form>

还有一个案例是关于商品分类的问题，这个多用于网上购物方面。

1 整机
15 笔记本
16 笔记本配件
17 台式机
18 服务器
19 服务器配件
20 工作站
21 小型机
22 移动PC
23 平板电脑
24 网络电脑
2 数码产品
25 数据相机
26 MP3
27 便携式DVD
28 数码学习机
29 数码摄像头
30 数码相机伴侣
31 MD播放器
32 滤镜镜头
33 多媒体硬盘播放
3 无线网
34 无线上网卡
35 无线网卡
4 配件
36 CPU
37 内存
38 主板
5 耗材
40 墨盒
41 纸张
6 软件
42 操作系统
43 办公软件
44 杀毒软件
7 语音视频
45 视频会议
46 视频卡
8 办公设备
47 投影机
48 打印机
49 扫描仪
9 网络设备
50 交换机
51 集线器
10 机房布线
52 测试仪
53 机房空调
11 移动存储
54 闪存卡
55 移动硬盘
12 通讯设备
56 手机
57 电话机
13 显示设备
58 液晶显示器
59 CRT显示器
14 其他
60 游戏机
61 电池
62 音响

附上数据。

HTML:

<form name="frmProduct">
......<br>
商品大类:
<select name="sltParent" id="sltParent" onChange="ss()">
<option value="0">--选择大类--</option>
<option value="1">--整机--</option>
<option value="2">--数码产品--</option>
<option value="3">--无线网--</option>
<option value="4">--配件--</option>
<option value="5">--耗材--</option>
<option value="6">--软件--</option>
<option value="7">--语音视频--</option>
<option value="8">--办公设备--</option>
<option value="9">--网络设备--</option>
<option value="10">--机房布线--</option>
<option value="11">--移动存储--</option>
<option value="12">--通讯设备--</option>
<option value="13">--显示设备--</option>
<option value="14">--其他--</option>
</select>
商品子类:
<select name="sltSub" id="sltSub" onChange="ss2()">
<option value="">--选择子类--</option>
</select>
<br>......
<input type="button" onClick="showSele()" value="提交"/>
</form>

JS:

<script type="text/javascript">

//使用数组存储数据
var agoods1=new Array('请选择','整机','数码产品','无线网','配件','耗材','软件','语音视频','办公设备','网络设备','机房布线','移动存储','通讯设备','显示设备','其他');
var agoods2=new Array('--选择子类--','笔记本','笔记本配件','台式机','服务器','服务器配件','工作站','小型机','移动PC','平板电脑','网络电脑','数据相机','MP3','便携式DVD','数码学习机','数码摄像头','数码相机伴侣','MD播放器','滤镜镜头','多媒体硬盘播放','无线上网卡','无线网卡','CPU','内存','主板',' ','墨盒','纸张','操作系统', '办公软件','杀毒软件','视频会议','视频卡','投影机','打印机','扫描仪','交换机','集线器','测试仪','机房空调','闪存卡','移动硬盘','手机','电话机','液晶显示器','CRT显示器','游戏机','电池','音响');

//声明一个arrayGoods对应，这个对象在new的时候指向一个数组，可通过arrayGoodsP['i']找到对应数组
var arrayGoodsP=new Object();
arrayGoodsP['1']=new Array('--选择子类--','15','16','17','18','19','20','21','22','23','24');
arrayGoodsP['2']=new Array('--选择子类--','25','26','27','28','29','30','31','32','33');
arrayGoodsP['3']=new Array('--选择子类--','34','35');
arrayGoodsP['4']=new Array('--选择子类--','36','37','38');
arrayGoodsP['5']=new Array('--选择子类--','40','41');
arrayGoodsP['6']=new Array('--选择子类--','42','43','44');
arrayGoodsP['7']=new Array('--选择子类--','45','46');
arrayGoodsP['8']=new Array('--选择子类--','47','48','49');
arrayGoodsP['9']=new Array('--选择子类--','50','51');
arrayGoodsP['10']=new Array('--选择子类--','52','53');
arrayGoodsP['11']=new Array('--选择子类--','54','55');
arrayGoodsP['12']=new Array('--选择子类--','56','57');
arrayGoodsP['13']=new Array('--选择子类--','58','59');
arrayGoodsP['14']=new Array('--选择子类--','60','61','62');
var result="";

 //该方法实现了商品大类与子类的联动
function ss()
{
var sltp=document.getElementById("sltParent");
var slsb=document.getElementById("sltSub");
var sva=sltp.value;
slsb.options.length=1;
for(var i=0;i<arrayGoodsP[sva].length;i++)
{
if(i==25)
{
continue;
}
if(i!=0)
{
 slsb.options[i]=new Option(agoods2[Number(arrayGoodsP[sva][i])-14],arrayGoodsP[sva][i]);
}
else
{
 slsb.options[i]=new Option(agoods2[0],'0');
}
}
}
function ss()
{
var sltp=document.getElementById("sltParent");
var slsb=document.getElementById("sltSub");
var sva=sltp.value;
slsb.options.length=1;
for(var i=0;i<arrayGoodsP[sva].length;i++)
{
if(i==25)
{
continue;
}
if(i!=0)
{
 slsb.options[i]=new Option(agoods2[Number(arrayGoodsP[sva][i])-14],arrayGoodsP[sva][i]);
}
else
{
 slsb.options[i]=new Option(agoods2[0],'0');
}
}
}

 //ss2()和showSele()方法实现提交时，显示对应选择的商品名称与编号

 function ss2()
{
var slsb2=document.getElementById("sltSub");
if(slsb2.value!="--选择子类--")
{
result=slsb2.value;
}
}
function showSele()
{
alert("您选择的商品为"+agoods2[Number(result)-14]+",商品的编号为"+result);
}
</script>function ss2()
{
var slsb2=document.getElementById("sltSub");
if(slsb2.value!="--选择子类--")
{
result=slsb2.value;
}
}
function showSele()
{
alert("您选择的商品为"+agoods2[Number(result)-14]+",商品的编号为"+result);
}
</script>

其中new Option(agr,agr),第一个参数为text文本，第二参数为服务器返回的value值。比如 new Option("举例","0"),相对应的HTML

就是<option value="0">举例</option>。