页面如下:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>JQuery_Study_Select</title>
- <link rel="stylesheet" type="text/css" href="css/select.css">
- <script language="javascript" src="js/jquery-1.4.2.js"></script>
- <script language="javascript" src="js/select.js"></script>
- </head>
- <body>
- <div class="loading">
- <p><img src="images/data-loading.gif" alt="数据装载中" /></p>
- <p>数据装载中......</p>
- </div>
- <div class="car">
- <span class="carname">
- 汽车厂商:
- <select>
- <option value="" selected="selected">请选择汽车厂商</option>
- <option value="BMW">宝马</option>
- <option value="Audi">奥迪</option>
- <option value="VW">大众</option>
- </select>
- <img src="images/pfeil.gif" alt="有数据" />
- </span>
- <span class="cartype">
- 汽车类型:
- <select></select>
- <img src="images/pfeil.gif" alt="有数据" />
- </span>
- <span class="wheeltype">
- 车轮类型:
- <select></select>
- </span>
- </div>
- <div class="carimage">
- <p><img src="images/img-loading.gif" alt="图片装载中" class="carloading" /></p>
- <p><img src="" alt="汽车图片" class="carimg"/></p>
- </div>
- </body>
- </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery_Study_Select</title>
<link rel="stylesheet" type="text/css" href="css/select.css">
<script language="javascript" src="js/jquery-1.4.2.js"></script>
<script language="javascript" src="js/select.js"></script>
</head>
<body>
<div class="loading">
<p><img src="images/data-loading.gif" alt="数据装载中" /></p>
<p>数据装载中......</p>
</div>
<div class="car">
<span class="carname">
汽车厂商:
<select>
<option value="" selected="selected">请选择汽车厂商</option>
<option value="BMW">宝马</option>
<option value="Audi">奥迪</option>
<option value="VW">大众</option>
</select>
<img src="images/pfeil.gif" alt="有数据" />
</span>
<span class="cartype">
汽车类型:
<select></select>
<img src="images/pfeil.gif" alt="有数据" />
</span>
<span class="wheeltype">
车轮类型:
<select></select>
</span>
</div>
<div class="carimage">
<p><img src="images/img-loading.gif" alt="图片装载中" class="carloading" /></p>
<p><img src="" alt="汽车图片" class="carimg"/></p>
</div>
</body>
</html>
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;
- }
.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;
}
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(){
- //val()方法:获得(设置)第一个匹配元素的当前值。
- var carnameValue = $(this).val();
- wheeltypeSelect.parent().hide();
- //attr(key,value)方法:为所有匹配的元素设置一个属性值。
- carimg.hide().attr("src","");
- if(carnameValue!=""){
- if(carnameSelect.data(carnameValue)) {//从缓存中取数据
- var data = carnameSelect.data(carnameValue);
- //html(val):设置每一个匹配元素的html内容
- cartypeSelect.html("");
- if(data.length!=0){
- $("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);
- for(var i=0;i<data.length;i++){
- $("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);
- }
- carnameSelect.next().show();
- cartypeSelect.parent().show();
- }else{
- carnameSelect.next().hide();
- cartypeSelect.parent().hide();
- wheeltypeSelect.parent().hide();
- }
- }else {
- //Ajax的post请求:
- $.post("CarJsonServlet",{keyword:carnameValue,type:"top"},function(data){
- cartypeSelect.html("");
- if(data.length!=0){
- $("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);
- for(var i=0;i<data.length;i++){
- $("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);
- }
- carnameSelect.next().show();
- cartypeSelect.parent().show();
- }else{
- carnameSelect.next().hide();
- cartypeSelect.parent().hide();
- wheeltypeSelect.parent().hide();
- }
- carnameSelect.data(carnameValue,data);
- },"json");
- }
- }else{
- carnameSelect.next().hide();
- cartypeSelect.parent().hide();
- wheeltypeSelect.parent().hide();
- }
- });
- cartypeSelect.change(function(){
- carimg.hide().attr("src","");
- var cartypeValue = $(this).val();
- if(cartypeValue !=""){
- if(cartypeSelect.data(cartypeValue)) {
- var data = cartypeSelect.data(cartypeValue);
- wheeltypeSelect.html("");
- if(data.length!=0){
- $("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);
- for(var i=0;i<data.length;i++){
- $("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);
- }
- cartypeSelect.next().show();
- wheeltypeSelect.parent().show();
- }else{
- cartypeSelect.next().hide();
- wheeltypeSelect.parent().hide();
- }
- }else {
- $.post("CarJsonServlet",{keyword:cartypeValue,type:"sub"},function(data){
- wheeltypeSelect.html("");
- if(data.length!=0){
- $("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);
- for(var i=0;i<data.length;i++){
- $("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);
- }
- cartypeSelect.next().show();
- wheeltypeSelect.parent().show();
- }else{
- cartypeSelect.next().hide();
- wheeltypeSelect.parent().hide();
- }
- cartypeSelect.data(cartypeValue,data);
- },"json");
- }
- }else{
- cartypeSelect.next().hide();
- wheeltypeSelect.parent().hide();
- }
- });
- wheeltypeSelect.change(function(){
- var wheeltypeName = $(this).val();
- var cartypeName = cartypeSelect.val();
- var carnameName = carnameSelect.val();
- var carimgName = carnameName+"_"+cartypeName+"_"+wheeltypeName+".jpg";
- carimg.hide();//原来的图片隐藏
- $(".carloading").show();
- var cachimage = new Image();
- $(cachimage).attr("src","images/"+carimgName);//预装载,预装载时显示load图片
- //carimg.attr("src","images/"+carimgName).show();
- $(cachimage).load(function(){//装载完之后执行的操作,页面会缓存图片
- $(".carloading").hide();
- carimg.attr("src","images/"+carimgName).show();//由于页面会缓存图片显示会很快
- });
- });
- $(".loading").ajaxStart(function(){
- $(".loading").css("visibility","visible");
- $(".loading").animate({
- opacity: 1
- },0);
- }).ajaxStop(function(){
- //$(".loading").css("visibility","hidden");
- //$(".loading").fadeOut(500);
- $(".loading").animate({
- opacity: 0
- },500);
- });
- });
$(document).ready(function(){
//找到三个下接框
var carnameSelect = $(".carname").children("select");
var cartypeSelect = $(".cartype").children("select");
var wheeltypeSelect = $(".wheeltype").children("select");
var carimg = $(".carimg");
carnameSelect.change(function(){
//val()方法:获得(设置)第一个匹配元素的当前值。
var carnameValue = $(this).val();
wheeltypeSelect.parent().hide();
//attr(key,value)方法:为所有匹配的元素设置一个属性值。
carimg.hide().attr("src","");
if(carnameValue!=""){
if(carnameSelect.data(carnameValue)) {//从缓存中取数据
var data = carnameSelect.data(carnameValue);
//html(val):设置每一个匹配元素的html内容
cartypeSelect.html("");
if(data.length!=0){
$("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);
for(var i=0;i<data.length;i++){
$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);
}
carnameSelect.next().show();
cartypeSelect.parent().show();
}else{
carnameSelect.next().hide();
cartypeSelect.parent().hide();
wheeltypeSelect.parent().hide();
}
}else {
//Ajax的post请求:
$.post("CarJsonServlet",{keyword:carnameValue,type:"top"},function(data){
cartypeSelect.html("");
if(data.length!=0){
$("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);
for(var i=0;i<data.length;i++){
$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);
}
carnameSelect.next().show();
cartypeSelect.parent().show();
}else{
carnameSelect.next().hide();
cartypeSelect.parent().hide();
wheeltypeSelect.parent().hide();
}
carnameSelect.data(carnameValue,data);
},"json");
}
}else{
carnameSelect.next().hide();
cartypeSelect.parent().hide();
wheeltypeSelect.parent().hide();
}
});
cartypeSelect.change(function(){
carimg.hide().attr("src","");
var cartypeValue = $(this).val();
if(cartypeValue !=""){
if(cartypeSelect.data(cartypeValue)) {
var data = cartypeSelect.data(cartypeValue);
wheeltypeSelect.html("");
if(data.length!=0){
$("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);
for(var i=0;i<data.length;i++){
$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);
}
cartypeSelect.next().show();
wheeltypeSelect.parent().show();
}else{
cartypeSelect.next().hide();
wheeltypeSelect.parent().hide();
}
}else {
$.post("CarJsonServlet",{keyword:cartypeValue,type:"sub"},function(data){
wheeltypeSelect.html("");
if(data.length!=0){
$("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);
for(var i=0;i<data.length;i++){
$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);
}
cartypeSelect.next().show();
wheeltypeSelect.parent().show();
}else{
cartypeSelect.next().hide();
wheeltypeSelect.parent().hide();
}
cartypeSelect.data(cartypeValue,data);
},"json");
}
}else{
cartypeSelect.next().hide();
wheeltypeSelect.parent().hide();
}
});
wheeltypeSelect.change(function(){
var wheeltypeName = $(this).val();
var cartypeName = cartypeSelect.val();
var carnameName = carnameSelect.val();
var carimgName = carnameName+"_"+cartypeName+"_"+wheeltypeName+".jpg";
carimg.hide();//原来的图片隐藏
$(".carloading").show();
var cachimage = new Image();
$(cachimage).attr("src","images/"+carimgName);//预装载,预装载时显示load图片
//carimg.attr("src","images/"+carimgName).show();
$(cachimage).load(function(){//装载完之后执行的操作,页面会缓存图片
$(".carloading").hide();
carimg.attr("src","images/"+carimgName).show();//由于页面会缓存图片显示会很快
});
});
$(".loading").ajaxStart(function(){
$(".loading").css("visibility","visible");
$(".loading").animate({
opacity: 1
},0);
}).ajaxStop(function(){
//$(".loading").css("visibility","hidden");
//$(".loading").fadeOut(500);
$(".loading").animate({
opacity: 0
},500);
});
});
servlet内空如下:
- public class CarJsonServlet extends HttpServlet {
- /**
- *
- */
- private static final long serialVersionUID = 7438884867809030432L;
- public void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- this.doPost(request, response);
- }
- public void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- response.setContentType("text/html;charset=UTF-8");
- response.setHeader("Cache-Control", "no-cache");
- String type = request.getParameter("type");
- String keyword = request.getParameter("keyword");
- StringBuffer jsonresult = new StringBuffer();
- JSONArray jsonArrayResult = new JSONArray();
- jsonresult.append("[");
- if ("top".equals(type)) {
- if ("BMW".equals(keyword)) {
- // jsonresult.append("\"316ti\"");
- // jsonresult.append(",\"6ercupe\"");
- jsonArrayResult.add("316ti");
- jsonArrayResult.add("6ercupe");
- } else if ("Audi".equals(keyword)) {
- // jsonresult.append("\"tt\"");
- jsonArrayResult.add("tt");
- } else if ("VW".equals(keyword)) {
- // jsonresult.append("\"Golf\"");
- jsonArrayResult.add("Golf4");
- }
- } else if ("sub".equals(type)) {
- if ("tt".equals(keyword)) {
- jsonArrayResult.add("rha");
- jsonArrayResult.add("rhb");
- jsonArrayResult.add("rhc");
- } else if ("316ti".equals(keyword)) {
- jsonArrayResult.add("rha");
- jsonArrayResult.add("rhb");
- } else if ("6ercupe".equals(keyword)) {
- jsonArrayResult.add("rha");
- jsonArrayResult.add("rhb");
- jsonArrayResult.add("rhc");
- } else if("Golf4".equals(keyword)){
- jsonArrayResult.add("rha");
- jsonArrayResult.add("rhb");
- }
- }
- //jsonresult.append("]");
- PrintWriter out = response.getWriter();
- out.write(jsonArrayResult.toString());
- out.flush();
- out.close();
- }
- }
public class CarJsonServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 7438884867809030432L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
String type = request.getParameter("type");
String keyword = request.getParameter("keyword");
StringBuffer jsonresult = new StringBuffer();
JSONArray jsonArrayResult = new JSONArray();
jsonresult.append("[");
if ("top".equals(type)) {
if ("BMW".equals(keyword)) {
// jsonresult.append("\"316ti\"");
// jsonresult.append(",\"6ercupe\"");
jsonArrayResult.add("316ti");
jsonArrayResult.add("6ercupe");
} else if ("Audi".equals(keyword)) {
// jsonresult.append("\"tt\"");
jsonArrayResult.add("tt");
} else if ("VW".equals(keyword)) {
// jsonresult.append("\"Golf\"");
jsonArrayResult.add("Golf4");
}
} else if ("sub".equals(type)) {
if ("tt".equals(keyword)) {
jsonArrayResult.add("rha");
jsonArrayResult.add("rhb");
jsonArrayResult.add("rhc");
} else if ("316ti".equals(keyword)) {
jsonArrayResult.add("rha");
jsonArrayResult.add("rhb");
} else if ("6ercupe".equals(keyword)) {
jsonArrayResult.add("rha");
jsonArrayResult.add("rhb");
jsonArrayResult.add("rhc");
} else if("Golf4".equals(keyword)){
jsonArrayResult.add("rha");
jsonArrayResult.add("rhb");
}
}
//jsonresult.append("]");
PrintWriter out = response.getWriter();
out.write(jsonArrayResult.toString());
out.flush();
out.close();
}
}
web.xml中的servlet配置如下:
- <servlet>
- <servlet-name>CarJsonServlet</servlet-name>
- <servlet-class>com.mengya.servlet.CarJsonServlet</servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>CarJsonServlet</servlet-name>
- <url-pattern>/CarJsonServlet</url-pattern>
- </servlet-mapping>