js下拉列表二级联动

刺骨的言语ヽ痛彻心扉 2022-06-01 04:41 440阅读 0赞

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

![SouthEast][]![SouthEast 1][]

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

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:

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

![SouthEast 2][]

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:

JS:

//使用数组存储数据
    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()方法实现提交时，显示对应选择的商品名称与编号

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

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

[SouthEast]: https://img-blog.csdn.net/20180120090121622?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1NDI2ODk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20220601/003c2b8377d24d11977c1ad0207890cb.png
[SouthEast 2]: /images/20220601/a5f329812593430180ccf90b98a977a3.png