jq实现级联下拉框效果

DoubleEO · 发表于 2013-2-7 21:23:17

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>jquery5-级联下拉框</title> <link type="text/css" rel="stylesheet" href="css/chainselect.css"> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/chainselect.js"></script></head><body><div class="loading"> <div> <p><img src="image/loading.gif" alt="数据装载中"/></p> <p>数据装载中..................</p> </div></div><div class="car"> <span class="carname"> 汽车厂商： <select> <option value="" selected="selected">请选择厂商</option> <option value="BMW">宝马</option> <option value="Audi">奥迪</option> <option value="UW">大众</option> </select> <img src="image/closed.gif" alt="有数据"/> </span> <span class="cartype"> 汽车类型： <select></select> <img src="image/closed.gif" alt="有数据"/> </span> <span class="wheeltype"> 车轮类型： <select></select> </span></div><div class="carimage"> <p><img src="image/loadingyuan.gif" alt="图片装载中" class="carloading"></p> <p><img src="" alt="汽车图片" class="carimg"></p></div></body></html>

.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, .carimg, .carloading, .car img { display: none;}
$(function() { //找到3个下拉框 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只要第一个下拉框的内容有变化，第3个下拉框就要藏起来 wheeltypeSelect.parent().hide(); //1.2将汽车图片隐藏起来 carimg.hide().attr("src", ""); //2.如果值不为空，则将下拉框的值传送给服务器 if (carnameValue != "") { if (cartypeSelect.data(carnameValue)) { $.post("/selecttest/test", {keyword:carnameValue,type:"top"}, function() { //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显示image next找兄弟节点 carnameSelect.next().show(); } else { //2.3m没有任何汽车类型的数据 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } //缓存 carnameSelect.data(carnameValue, data); }, "json"); } else { var data = cartypeSelect.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显示image next找兄弟节点 carnameSelect.next().show(); } else { //2.3m没有任何汽车类型的数据 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } } } else { //3.如果值为空，那么第2个下拉框所在的span要隐藏，第一个下拉框后面的指示图片 //也要隐藏 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } }); cartypeSelect.change(function() { //1.需要获得当前下拉框的值 var carntypeValue = $(this).val(); //1,1将汽车图片隐藏起来 carimg.hide().attr("src", ""); //2.如果值不为空，则将下拉框的值传送给服务器 if (carntypeValue != "") { $.post("/selecttest/test", {keyword:carnameValue,type:"sub"}, function() { //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(cartypeSelect); } //2.2.1车轮类型的下拉框显示出来 wheeltypeSelect.parent().show(); //2.2.2显示image next找兄弟节点 carntypeValue.next().show(); } else { //2.3m没有任何汽车类型的数据 wheeltypeSelect.parent().hide(); carntypeValue.next().hide(); } }, "html"); } else { //3.如果值为空，那么第3个下拉框所在的span要隐藏，第一个下拉框后面的指示图片 //也要隐藏 wheeltypeSelect.parent().hide(); carntypeValue.next().hide(); } }); wheeltypeSelect.change(function() { //1获取车轮类型 var wheeltypeValue = $(this).val(); var carnameValue = carnameSelect.val(); var cartypeValue = cartypeSelect.val(); //2根据汽车厂商名称 var carimgname = carnameValue + "_" + cartypeValue + "_" + wheeltypeValue + ".jpg"; //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); });});

		自动登录	找回密码
密码			立即注册