jQuery实现级联下拉框实战5

今天来完成jQuery实战的级联下拉框效果。效果功能如下：

页面默认只提供汽车厂商，当选择了具体的某品牌汽车，汽车类型下拉框就会动态的显示出来，选择对应的类型，然后出来该汽车类型对应的轮胎类型下拉框显示出来，选中轮胎类型，页面的正中间会显示出汽车的图片。 思路分析如图：

建立我们的html页面，程序清单如下：

代码清单1.1: chainSelect.jsp

rush:xhtml;">

数据装载中......

默认选项 Test1 默认选项 Test1

图片装载中" class="carloading">

图片" class="carimg">

body体里面囊括了3个div，第一个div的作用是显示“数据正在装载中…”的图片和文字。第二个div显示级联下拉效果。第三个div显示车辆图片。

css代码如下:

代码清单1.2:chainSelect.css

rush: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

rush: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()方法的请求方式。

概述:

通过远程 HTTP POST 请求载入信息.这是一个简单的 POST 请求功 能以取代复杂ajax() 。请求成功时可调>用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

参数含义:

url:发送请求地址。 data:待发送 Key/value 参数。 callback:发送成功时回调函数。 type:返回内容格式，xml,html,script,json,text,_default。

案例如下:

代码清单1.4：demo.js

rush: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

<div class="jb51code">
<pre class="brush: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,IOException {
doGet(request,response);
}
}