【JQuery】——级联下拉框效果

柔情只为你懂 2022-07-14 01:37 299阅读 0赞

# 【html】 #

<html>
    	<head>
    		<title>JQuery实例-级联下拉框效果</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<link type="text/css" rel="stylesheet" href="css/chainselect.css" />
    		<script type="text/javascript" src="js/jquery.js"></script>
    		<script type="text/javascript" src="js/chainselect.js"></script>
    	</head>
    	<body>
    		<div class="loading">
    			<p><img src="images/data-loading.gif" alt="数据装载中" /></p>
    			<p>数据装载中......</p>
    		</div>
    		<div class="car">
    			<span class="carname">
    				汽车厂商:
    				<select>
    					<option value="" selected="selected">请选择汽车厂商</option>
    					<option value="BMW">宝马</option>
    					<option value="Audi">奥迪</option>
    					<option value="VW">大众</option>
    				</select>
    				<img src="images/pfeil.gif" alt="有数据" />
    			</span>
    			<span class="cartype">
    				汽车类型:
    				<select></select>
    				<img src="images/pfeil.gif" alt="有数据" />
    			</span>
    			<span class="wheeltype">
    				车轮类型：
    				<select></select>
    			</span>
    		</div>
    		<div class="carimage">
    			<p><img src="images/img-loading.gif" alt="图片装载中" class="carloading" /></p>
    			<p><img src="" alt="汽车图片" class="carimg"/></p>
    		</div>
    	</body>
    </html>

# 【CSS】 #

.loading {
    	width: 400px;
    	/*margin-left: auto;*/
    	/*margin-right: auto;*/
    	margin: 0 auto;
    	visibility: hidden; 
    }
    .loading p {
    	text-align: center;
    }
    p {
    	margin: 0;
    }
    .car {
    	/*width: 500px;*/
    	/*margin: 0 auto;*/
    	text-align: center;
    }
    .carimage {
    	text-align: center;
    }
    .cartype, .wheeltype, .carloading, .carimg, .car img {
    	display: none;
    }

# 【js】 #

$(document).ready(function(){
    	//找到三个下拉框
    	var carnameSelect = $(".carname").children("select");
    	var cartypeSelect = $(".cartype").children("select");
    	var wheeltypeSelect = $(".wheeltype").children("select");
    	var carimg = $(".carimg");
    	//给三个下拉框注册事件
    	carnameSelect.change(function(){
    		//1.需要获得当前下拉框的值
    		var carnameValue = $(this).val();
    		//1.1只要第一个下拉框内容有变化，第三个下拉框都要先隐藏起来
    		wheeltypeSelect.parent().hide();
    		//1.2将汽车图片隐藏起来
    		carimg.hide().attr("src","");
    		//2.如果值不为空，则将下拉框的值传送给服务器
    		if (carnameValue != "") {
    			if (!carnameSelect.data(carnameValue)) {
    				$.post("ChainSelect",{keyword: carnameValue, type: "top"},function(data){
    					//2.1接收服务器返回的汽车类型
    					if (data.length != 0) {
    						//2.2解析汽车类型的数据，填充到汽车类型的下拉框中
    						cartypeSelect.html("");
    						$("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
    						for (var i = 0; i < data.length; i++) {
    							$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(cartypeSelect);
    						}
    						//2.2.1汽车类型的下拉框显示出
    						cartypeSelect.parent().show();
    						//2.2.2第一个下拉框后面的指示图片显示出来
    						carnameSelect.next().show();
    					} else {
    						//2.3没有任何汽车类型的数据
    						cartypeSelect.parent().hide();
    						carnameSelect.next().hide();
    					}
    					carnameSelect.data(carnameValue, data);
    				}, "json");
    			} else {
    				var data = carnameSelect.data(carnameValue);
    				//2.1接收服务器返回的汽车类型
    				if (data.length != 0) {
    					//2.2解析汽车类型的数据，填充到汽车类型的下拉框中
    					cartypeSelect.html("");
    					$("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
    					for (var i = 0; i < data.length; i++) {
    						$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(cartypeSelect);
    					}
    					//2.2.1汽车类型的下拉框显示出
    					cartypeSelect.parent().show();
    					//2.2.2第一个下拉框后面的指示图片显示出来
    					carnameSelect.next().show();
    				} else {
    					//2.3没有任何汽车类型的数据
    					cartypeSelect.parent().hide();
    					carnameSelect.next().hide();
    				}
    			}
    		} else {
    			//3.如果值为空，那么第二个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏
    			cartypeSelect.parent().hide();
    			carnameSelect.next().hide();
    		}
    	});
    
    	cartypeSelect.change(function(){
    		//1.需要获得当前下拉框的值
    		var cartypeValue = $(this).val();
    		//1.1将汽车图片隐藏起来
    		carimg.hide().attr("src","");
    		//2.如果值不为空，则将下拉框的值传送给服务器
    		if (cartypeValue != "") {
    			if (!cartypeSelect.data(cartypeValue)) {
    				$.post("ChainSelect",{keyword: cartypeValue, type: "sub"},function(data){
    					//2.1接收服务器返回的汽车类型
    					if (data.length != 0) {
    						//2.2解析汽车类型的数据，填充到车轮类型的下拉框中
    						wheeltypeSelect.html("");
    						$("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);
    						for (var i = 0; i < data.length; i++) {
    							$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(wheeltypeSelect);
    						}
    						//2.2.1车轮类型的下拉框显示出
    						wheeltypeSelect.parent().show();
    						//2.2.2第二个下拉框后面的指示图片显示出来
    						cartypeSelect.next().show();
    					} else {
    						//2.3没有任何汽车类型的数据		
    						wheeltypeSelect.parent().hide();
    						cartypeSelect.next().hide();
    					}
    					cartypeSelect.data(cartypeValue, data);
    				}, "json");
    			} else {
    				var data = cartypeSelect.data(cartypeValue);
    				//2.1接收服务器返回的汽车类型
    				if (data.length != 0) {
    					//2.2解析汽车类型的数据，填充到车轮类型的下拉框中
    					wheeltypeSelect.html("");
    					$("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);
    					for (var i = 0; i < data.length; i++) {
    						$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(wheeltypeSelect);
    					}
    					//2.2.1车轮类型的下拉框显示出
    					wheeltypeSelect.parent().show();
    					//2.2.2第二个下拉框后面的指示图片显示出来
    					cartypeSelect.next().show();
    				} else {
    					//2.3没有任何汽车类型的数据		
    					wheeltypeSelect.parent().hide();
    					cartypeSelect.next().hide();
    				}
    			}
    		} else {
    			//3.如果值为空，那么第三个下拉框所在span要隐藏起来，第二个下拉框后面的指示图片也要隐藏
    			wheeltypeSelect.parent().hide();
    			cartypeSelect.next().hide();
    		}
    	});
    
    	wheeltypeSelect.change(function(){
    		//1.获取车轮类型
    		var wheeltypeValue = $(this).val();
    		//2.根据汽车厂商名称，汽车型号和车轮类型得到汽车图片的文件名
    		var carnameValue = carnameSelect.val();
    		var cartypeValue = cartypeSelect.val();
    		var carimgname = carnameValue + "_" + cartypeValue + "_" + wheeltypeValue + ".jpg";
    
    		//3.显示出loading的图片
    		carimg.hide();
    		$(".carloading").show();
    		//4.通过Javascript中的Image对象预装载图片
    		var cacheimg = new Image();
    		$(cacheimg).attr("src","images/" + carimgname).load(function(){
    			//隐藏loading图片
    			$(".carloading").hide();
    			//显示汽车图片
    			carimg.attr("src","images/" + carimgname).show();
    		});
    		//3.修改汽车图片节点的src的值，让汽车图片显示出来
    		//carimg.attr("src","images/" + carimgname).show();
    		//4.使汽车图片的节点显示出来
    	});
    
    
    	//给数据装载中的节点定义ajax事件，实现动画提示效果
    	$(".loading").ajaxStart(function(){
    		$(this).css("visibility","visible");
    		$(this).animate({
    			opacity: 1
    		},0);
    	}).ajaxStop(function(){
    		$(this).animate({
    			opacity: 0
    		},500);
    	});
    })

# 【效果图】 #

![Center][]

# 【知识点分析】 #

1.img标签的alt属性要写上，在图片尚未装载进来或图片不存在时，这个属性的文字信息会显示出来  
 2.select表示下拉框，下拉框的每一项都是一个option，option开始结尾标签中的内容会显示在页面上，value属性的值则是用于在JQuery中用val方法获取并发送给服务器的。  
定义了selected的属性值为selected时，表示当前option被选中  
 3.div元素居中显示的方法：给div设定宽度，然后margin-left和margin-right的值都为auto。简写方法是margin: 0 auto;  
 4.html的p标签表示一个段落的内容，其中的内容会独占一行或多行，后面的内容会另起一行显示  
 5.为了让p中文字和图片居中，可以使用text-align属性，属性值为center。p标签默认有margin-top和margin-bottom的值，需要的话可以通过css清除  
 6.visibility的属性值为hidden时，元素隐藏，但是和display为none不同的时，在页面中任然占据一定空间，只是不显示  
 7.多个选择器如果有相同的属性值，可以放在一起定义，选择器之间用逗号分割  
 8.change方法对应标准Javascript中的onchange事件，可以处理下拉框内容变化的事件  
 9.parent方法可以获得一个节点的父节点  
 10.next方法可以获得一个节点的下一个兄弟节点，对应的previous方法可以获得一个节点的上一个兄弟节点  
 11.$.post方法可以和服务器端发起post的异步请求。第一个参数是请求的服务器端地址，第二个参数是发送给服务器端的数据，参数是Javascript的对象，采用名值对的方式表示，第三个参数是回调方法，第四个参数指示服务器端返回的数据类型，JQuery会根据这个参数帮我们进行转换。get方法只有第二个参数不同，其他几个参数用法相同  
 12.Javascript中的简单对象定义方式是\{key1:value1, key2: value2\}  
 13.JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容，比如\{key1: value1, key2: \[1,2,3\]\}或\[1,2,\{key2:value2\}\]  
 14.可以直接$(“<option></option>”)的方法来建立下拉框中的选项，然后用appendTo这样的方法加入到下拉框中  
 15.attr方法可以设置或获取某一个节点的属性值  
 16.ajaxStart在每一个JQuery发出的ajax请求开始前执行，ajaxStop在JQuery队列中所有的ajax请求结束后执行，ajaxComplete在每一个JQuery发出的ajax请求结束后执行  
 17.fadeOut和fadeIn可以实现淡出淡入的效果，参数内容和slideUp，slideDown方法类似。  
 18.animate方法可以实现任意的动画效果，可以控制某个css属性在某个时间内进行变化，从而达到动画的效果  
 19.opacity可以改变元素的透明度，IE中使用过滤器实现，100表示完全显示，0表示完全透明，非IE浏览器使用opacity属性，1表示完全显示，0表示透明。JQuery在animate方法中屏蔽了浏览器差异，直接使用opacity就可以达到淡入淡出的效果。  
 20.data方法可以用于缓存数据。缓存可以提高系统的运行效率，降低服务器端的负荷  
 21.可以使用Javascript中的Image对象来预装载图片，这样可以知道图片何时装载完成，以便给出一些图片装载的提示信息。  
 22.load方法可以对应Javascript中的onload事件，本例中用于捕捉图片加载完成的事件

# 【项目】 #

项目中的联查

$(function () {
        //获取学院信息
        $("#college").combobox({
            url: '/ScoreAnalysisManage/QueryAllExamCollegeIdAndName',
            valueField: 'id',
            textField: 'value',
            //联动
            onSelect: function (rec) {
                var id = rec.id;
                //获取课程信息-贾文静-2016年8月3日15:17:44
                $('#course').combobox({
                    url: '/ScoreAnalysisManage/QueryCoursesByCollegeID?CollegeID=' + id,
                    valueField: 'id',
                    textField: 'value',
                    //联动获取题型信息-贾文静-2016年8月3日15:18:06
                    onSelect: function (rec) {
                        var id = rec.id;
                        $('#type').combobox({
                            url: '/ScoreAnalysisManage/QueryQuestionTypeByCourseID?CourseID=' + id,
                            valueField: 'id',
                            textField: 'value'
                        })
                    }
                })
                //var url = '/ScoreAnalysisManage/QueryCoursesByCollegeID?CollegeID=';
                //$('#course').combobox('reload', url);
            }
        });

[Center]: /images/20220714/197135788a474225b233486fb9248f29.png