级联下拉列表框

最新推荐文章于 2021-09-18 10:15:36 发布

tianjun2012

最新推荐文章于 2021-09-18 10:15:36 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jQuery js

本文链接：https://blog.youkuaiyun.com/tianjun2012/article/details/50241857

前端专栏收录该内容

6 篇文章

订阅专栏

本文展示了如何利用jQuery创建级联下拉列表框的步骤，通过四个关键截图展示了从初始状态到最终效果的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还是老规矩，先来看下效果图：

图1：

图2：

图3：

图4：

这就省份等常见的级联下拉列表框的原型；下面来看看代码的构成

<html>
	<head>
		<meta charset="UTF-8">
		<title>标题</title>
		<script language="JavaScript" type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
		<style>
			body{
				font-size: 13px;
			}
			.clsInit{
				width: 435px;
				height: 35px;
				line-height: 35px;
				padding-left: 10px;
			}
			.divTip{
				padding-top: 5px;
				background-color: #eee;
				display: none;
			}
			.btn{
				border: #666 1px solid;
				padding: 2px;
				width: 65px;
				float: right;
				margin-top: 6px;
				margin-right: 6px;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				function objInit(obj){
					return $(obj).html("<option>选择请</option>");
				}
				
				var arrData = {
					厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },
             		 厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2" },
              		厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2" }
				};
				
				$.each(arrData,function(pF){//遍历数据增加厂商项
					$("#selF").append("<option>"+pF+"</option>");
				});
				
				$("#selF").change(function(){//厂商列表框选项改变事件
					objInit("#selT");
					objInit("#selC");
					
					$.each(arrData,function(pF,pS){
						if($("#selF option:selected").text()==pF){//如果厂商选中项与数据匹配
							$.each(pS,function(pT,pC){//遍历数据增加品牌项
								$("#selT").append("<option>"+pT+"</option>");
							});
							
							$("#selT").change(function(){//品牌列表框选项改变事件
								objInit("#selC");
								$.each(pS,function(pT,pC){
									if($("#selT option:selected").text()==pT){//如果品牌选中项与数据匹配
										$.each(pC.split(","),function(){//遍历数据增加型号项
											$("#selC").append("<option>"+this+"</option>");
										});
									}
								});
							});
						}
					});
				});
				 $("#Button1").click(function() { //注册按钮单击事件
	              var strValue = "您选择的厂商:";
	              strValue += $("#selF option:selected").text();
	              strValue += " 您选择的品牌:";
	              strValue += $("#selT option:selected").text();
	              strValue += " 您选择的型号:";
	              strValue += $("#selC option:selected").text();
	              $("#divTip")
	              .show()
	              .addClass("clsTip")
	              .html(strValue); //显示提示信息并增加样式
	          });
				
			})
		</script>
	</head>
	<body>
		<div class="clsInit">
      		厂商：<select id="selF"><option>请选择</option></select>  
      		 品牌：<select id="selT"><option>请选择</option></select>  
      		 型号：<select id="selC"><option>请选择</option></select> 
      		<input id="Button1" type="button" value="查询" class="btn" />
    	</div> 
    <div class="divTip" id="divTip"></div>
	</body>
</html>