Jquery简单模拟三级联动

最新推荐文章于 2024-08-09 18:43:30 发布

iteye_2680

最新推荐文章于 2024-08-09 18:43:30 发布

阅读量107

点赞数

分类专栏： jQuery 文章标签： jquery html JavaScript ViewUI

本文链接：https://blog.csdn.net/iteye_2680/article/details/82471441

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏



<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery学习系统-事件切换之三级联动的运用</title>
<link href="/res/common.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.clsInit{
    width:500px;
    height:35px;
    line-height:35px;
    padding-left:10px;
}
.clsTip{
    padding-top:5px;
    background-color:#EEE;
}
.btn{
    border:1px solid #666;
    padding:2px;
    width:65px;
    float:right;
    margin-top:6px;
    margin-right:6px;
}
</style>
<script type="text/javascript" src="/res/jquery-1.6.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	function objInit(obj){
		return $(obj).html('<option>请选择</option>');		
	}
	var arryData={
			厂商1: {
				            品牌1_1:"型号1_1_1,型号1_1_2",
				            品牌1_2:"型号1_2_1,型号1_2_2,型号1_2_3",
				            品牌1_3:"型号1_3_1,型号1_3_2,型号1_3_3,型号1_3_4"
				},
	                      厂商2: {      
	                                                        品牌2_1:"型号2_1_1,型号2_1_2",
					            品牌2_2:"型号2_2_1,型号2_2_2,型号2_2_3",
					            品牌2_3:"型号2_3_1,型号2_3_2,型号2_3_3,型号2_3_4",
					            品牌2_4:"型号2_4_1,型号2_4_2,型号2_4_3,型号2_4_4,型号2_4_5,型号2_4_6"
			     },
	                      厂商3: {
	                                                        品牌3_1:"型号3_1_1,型号3_1_2,型号3_1_3,型号3_1_4,型号3_1_5,型号3_1_6,型号3_1_7",
					            品牌3_2:"型号3_2_1,型号3_2_2,型号3_2_3,型号3_2_4,型号3_2_5,型号3_2_6,型号3_2_7,型号3_2_8"					            
	              }
	};
	$.each(arryData,function(pF){//遍历数据增加厂商项
		$("#selF").append('<option>'+pF+'</option>');
	});
	$("#selF").change(function(){//厂商项列表框改变
		objInit("#selT");
		objInit("#selC");
		$.each(arryData,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=strValue+$("#selF option:selected").text();
		strValue=strValue+"；你选择的品牌：";
		strValue=strValue+$("#selT option:selected").text();
		strValue=strValue+"；你选择的型号：";
		strValue=strValue+$("#selC option:selected").text();
		$("#divTip").show().addClass("clsTip").html(strValue);
	});
});
</script>
</head>
<body>
  <div align="center">
      <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="clsInit" id="divTip"></div>
  </div>
</body>
</html>

iteye_2680

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery简单模拟三级联动

[code="html"]jQuery学习系统-事件切换之三级联动的运用.clsInit{ width:500px; height:35px; line-height:35px; padding-left:10px;}.clsTip{ padding-top:5px; background-...
复制链接

扫一扫

专栏目录