今天来完成jQuery实战的级联下拉框效果。效果功能如下：
页面默认只提供汽车厂商，当选择了具体的某品牌汽车，汽车类型下拉框就会动态的显示出来，选择对应的类型，然后出来该汽车类型对应的轮胎类型下拉框显示出来，选中轮胎类型，页面的正中间会显示出汽车的图片。
思路分析如图：
建立我们的html页面，程序清单如下：
代码清单1.1: chainSelect.jsp
<body> <div> <p><img src="https://www.jb51.net/image/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/image/pfeil.gif" alt="有数据"> </span> <span> 汽车类型: <select> <option selected="selected">默认选项</option> <option>Test1</option> </select> <img alt="有数据" src="https://www.jb51.net/image/pfeil.gif"> </span> <span> 车轮类型: <select> <option selected="selected">默认选项</option> <option>Test1</option> </select> </span> </div> <div> <p><img src="https://www.jb51.net/image/img-loading.gif" alt="图片装载中"></p> <p><img src="" alt="汽车图片"></p> </div> </body>
body体里面囊括了3个div，第一个div的作用是显示“数据正在装载中…”的图片和文字。第二个div显示级联下拉效果。第三个div显示车辆图片。
css代码如下:
代码清单1.2:chainSelect.css
.loading { width: 400px; margin: 0 auto; /* visibility: hidden; */ } .loading p { text-align: center; } p { margin: 0; } .car { text-align: center; } .carimage { text-align: center; } .cartype, .wheeltype, .carloading, .carimg, .car img { display: none; }
代码清单1.3:chainSelect.js
$(document).ready(function(){ //找到三个下拉框 var carnameSelect = $(".carname").children("select"); var cartypeSelect = $(".cartype").children("select"); var wheeltypeSelect = $(".wheeltype").children("select"); carnameSelect.change(function(){ console.log("汽车厂商触发onChange事件"); }); cartypeSelect.change(function(){ console.log("汽车类型触发onChange事件"); }); wheeltypeSelect.change(function(){ console.log("车轮触发onChange事件"); }); });
首先用jQuery的class选择器选择出三个下拉的框，当它们的值改变时触发对应的jQuery函数，对jQuery函数的处理才是重点的内容。
首先说到jQuery中的ajax交互。前一篇我们用到get()的请求方式，今天来用以用post()方法的请求方式。
jQuery.post(url, [data], [callback], [type])
概述:
通过远程 HTTP POST 请求载入信息.这是一个简单的 POST 请求功
能以取代复杂ajax() 。请求成功时可调>用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
参数含义:
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
案例如下:
代码清单1.4：demo.js
$(document).ready(function(){ //发起ajax请求 $.post("../chainSelect", {name: "John", time: "2pm"}, function(data){ console.log("name : " + data.name); console.log("type : " + data.type); }, "json"); });
后台Serlvet处理如下(当然你可以使用java框架，也可以使用其他后台语言)。
代码清单1.5:demo.java
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ChainSelect extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("name = " + request.getParameter("name")); System.out.println("time = " + request.getParameter("time")); response.setCharacterEncoding("UTF-8"); response.setContentType("application/json; charset=utf-8"); String jsonStr = "{\"name\":\"fly\",\"type\":\"虫子\"}"; PrintWriter out = null; try { out = response.getWriter(); out.write(jsonStr); } catch (IOException e) { e.printStackTrace(); } finally { if (out != null) { out.close(); } } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }