jquery实战-级联下拉框
2. 级联下拉框
chainselect.html
$(document).ready(function() {//找到三个下拉框var carnameSelect = $(“.carname”).children(“select”);var cartypeSelect + $(“.cartype”).children(“select”);var wheeltypeSelect = $(“.whelltype”).children(“select”);var carimg = $(“.carimg”);//给三个下拉框注册事件carnameSelect.change(function(){ //1. 需要获得当前下拉框的值 var carnameValue = $(this).val(): wheeltypeSelect.parent().hide(); carimg.hide().attr(“src”,””); //2. 如果值不为空，则将下拉框的值传送给服务器 if(carnameValue != “”) { if(!carnameSelect.data(carnameValue)) { $.post(“ChainSelect”,{keyward: 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); cartypeSelect.parent().show(); //汽车类型的下拉框显示出 carnameSelect.next().show(); //第一个下拉框后面的指示图片显示出来 }} else { //2.3 没有任何汽车类型的数据 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } carnameSelect.data(carnameValue, data);}, ”json”) } else { var data = cartypeSelect.data(carnameValue); if(data.length != 0) { cartypeSelect.html(“”); $(“<option value=’’>请选择汽车类型</option>”).appendTo(cartypeSelect); for(var i = 0; i < data.length; i++) { $(“<option value=’” + data[i] + “’>” + data[i] + “</option>”).appendTo(cartypeSelect); cartypeSelect.parent().show(); //汽车类型的下拉框显示出 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():carimg.hide().attr(“src”,””);; //2. 如果值不为空，则将下拉框的值传送给服务器 if(cartypeValue != “”) { if(!cartypeSelect.data(cartypeValue)) { $.post(“ChainSelect”,{keyward: cartypeValue,type: sub}, function(data){//2.1 接收服务器返回的汽车类型 if(data.length != 0) {//2.2 解析汽车类型的数据，填充到车轮类型下拉框中 carwheelSelect.html(“”); $(“<option value=’’>请选择车轮类型</option>”).appendTo(wheeltypeSelect); for(var i = 0; i < data.length; i++) { $(“<option value=’” + data[i] + “’>” + data[i] + “</option>”).appendTo(wheeltypeSelect); wheeltypeSelect.parent().show(); //车轮类型的下拉框显示出 cartypeSelect.next().show(); //第二个下拉框后面的指示图片显示出来 }} else { //2.3 没有任何汽车类型的数据 wheeltypeSelect.parent().hide(); cartypeSelect.next().hide(); } cartypeSelect.data(cartypeValue,data);}, ”json”)}else { var data = cartypeSelect.data(cartypeValue);if(data.length != 0) {//2.2 解析汽车类型的数据，填充到车轮类型下拉框中 carwheelSelect.html(“”); $(“<option value=’’>请选择车轮类型</option>”).appendTo(wheeltypeSelect); for(var i = 0; i < data.length; i++) { $(“<option value=’” + data[i] + “’>” + data[i] + “</option>”).appendTo(wheeltypeSelect); wheeltypeSelect.parent().show(); //车轮类型的下拉框显示出 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”; carimg.hide();$(“.carloading”).show(); //显示loading的图片 //通过javascript中的Image对象预装载图片 var cacheimg = new Image(); $(cacheimg).attr(“src”,”images/” + carimgname).load(function(){ $(“.carloading”).hide(); //隐藏loading图片 carimg.attr(“src”,”images/” + carimgname).show();});//3. 修改汽车图片节点的src的值，让汽车图片显示 //carimg.attr(“src”,”images/” + carimgname).show();});//给数据装载中的节点定义ajax事件，实现动画提示效果$(“.loading”).ajaxStart(function(){ $(this).css(“visibility”,”visible”);$(this).animate({ opacity: 0;},0);}).ajaxStop(function(){ //$(this).fadeOut(500); $(this).animate({ opacity: 0;},500);});});?
知识宝典
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中的一个对象或数据定义的文本格式内容，比如{kery1: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事件，本例中用于捕捉图片加载完成的事件