JQuery下拉框联动很好的体现了Ajax的按需取数据的要求，减小数据的交互量。(点击此处下载源代码)
下面的实例使用Json将服务器端的类或者对象转换为JSON格式，主要运用了6个jar包
commons-beanutils-1.7.0.jar
commons-collections-3.2.jar
commons-lang-2.3.jar
commons-logging-1.0.4.jar
ezmorph-1.0.3.jar
json-lib-2.1.jar
下面贴上实验图，并详细讲解一下主要代码
显示页面index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"https://www.jb51.net/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery实例-级联下拉框效果</title> <meta http-equiv= "Content-Type" content="text/html";charset=UTF-8"> <link type="text/css" href="https://www.jb51.net/css/chainselect.css" /> <script type="text/javascript" src="https://www.jb51.net/js/jquery.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/chainselect.js"></script> </head> <body> <div> <p><img src="https://www.jb51.net/images/data-loading.gif" alt="数据装载中" /></p> <p>数据装载中......</p> </div> <div> <span> 汽车厂商: <select> <option value="" selected="selected">请选择汽车厂商</option> <option value="BMW">宝马</option> <option value="Audi">奥迪</option> <option value="VW">大众</option> </select> <img src="https://www.jb51.net/images/pfeil.gif" alt="有数据" /> </span> <span> 汽车类型: <select></select> <img src="https://www.jb51.net/images/pfeil.gif" alt="有数据" /> </span> <span> 车轮类型： <select></select> </span> </div> <div> <p><img src="https://www.jb51.net/images/img-loading.gif" alt="图片装载中" /></p> <p><img src="https://www.jb51.net/images/BMW_316ti_rha.jpg" alt="汽车图片"/></p> </div> </body> </html>
修饰文件chainselect.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; }
在这里，要注意属性 display: none; 与 visibility: hidden;的区别
display: none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;
visibility: hidden;
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
JQUERY处理文件chainselect.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)) { //对应服务器端程序 CarJsonServlet的属性，并将该Servlet中的数据转换为JSON格式 $.post("CarJsonServlet",{keyword: carnameValue, type: "top"},function(data){ //2.1接收服务器返回的汽车类型 ,data为数组格式 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 { //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("CarJsonServlet",{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 { //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); }); })
问题？？？：$("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);这里出现中文乱码怎么解决？？？
服务器端CarJsonServlet