页面如下：
<!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;
}
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);
});
});
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();
}
}
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>
分享到：
相关推荐
要实现级联下拉框，我们需要监听第一个下拉框的`change`事件，并根据其值来填充第二个下拉框，同样的逻辑也应用于第二个下拉框与第三个下拉框之间。 在HTML结构中，通常每个下拉框会被赋予一个唯一的ID，以便在...
总之，这个"layui-级联下拉框-可配置开启多选-HTML源码"涵盖了HTML基础、CSS美化、JavaScript交互、layui框架应用、数据绑定和配置选项等多个方面，是一个实用的前端开发资源。通过学习和使用这个源码，开发者可以...
级联下拉框是一种常见的用户界面元素，常用于在网页或应用程序中提供多级选择功能。在.NET框架中，实现这种交互通常涉及到HTML、CSS、JavaScript（如jQuery）以及服务器端的技术，例如ASP.NET。本示例可能是一个...
级联下拉框在网页设计和开发中是一种常见的交互元素，它主要用于提供一系列相互关联的选择项，用户在选择一个选项后，下一级的下拉框会根据前一级的选择动态更新其内容。这种功能通常用于地理位置选择、部门组织结构...
以下是一个简单的jQuery + AJAX实现级联下拉框的示例： ```html <select id="parentSelect"></select> <select id="childSelect"></select> <script src="https://code.jquery....
在Web开发中，实现动态级联下拉框是一种常见的需求，尤其在数据筛选或表单填写时。本项目“ajax + servlet 两级动态级联下拉框”旨在演示如何使用AJAX（异步JavaScript和XML）技术和Servlet进行交互，以实现在选择第...
动态级联下拉框构件是一种常见的前端交互组件，主要用于实现多级联动选择的效果。在网页设计中，这种组件常用于地址选择、分类筛选等场景，用户在选择一级选项后，二级甚至多级相关的下拉框内容会随之更新，提供更...
JSON（JavaScript Object Notation）和Select元素在网页开发中经常被用来构建动态的、交互式的用户界面，特别是在处理级联下拉框时。级联下拉框是指一个下拉框的选择会影响另一个下拉框的选项，这样的设计可以提高...
**Ajax 实现可配置无刷新级联下拉框** 在 Web 开发中，为了提供用户友好的交互体验，级联下拉框（Cascading Dropdown）是一个常见的需求。级联下拉框允许用户在一个下拉框中选择一个选项后，根据所选的选项动态更新...
在JSP（JavaServer Pages）中，级联下拉框的实现通常依赖于JavaScript、jQuery和Ajax技术。JavaScript用于增强页面交互性，jQuery简化了DOM操作，而Ajax则负责异步请求数据，确保页面无需刷新即可更新内容。 以下是...
总的来说，这个级联下拉框案例的核心在于使用jQuery监听并响应用户选择，动态更新下拉框选项，并可能涉及到与服务器的数据交互。虽然案例中没有涉及XML解析，但可以通过其他方式获取和处理数据，例如JSON或简单的...
**jQuery实现的多级级联下拉...总结，这个项目展示了如何利用jQuery与Struts1.2框架协同工作，实现动态的多级级联下拉列表。理解并熟练掌握这一技术，有助于提升Web应用的用户体验，使用户能够更方便地进行数据选择。
JQuery级联下拉是指使用JQuery库来实现级联下拉框效果的技术。级联下拉框是一种常见的Web应用程序组件，用于提供用户选择的选项，并根据用户的选择提供相关的下级选项。JQuery级联下拉技术可以帮助开发者快速实现...
总的来说，通过JQuery、Servlet和JSON的结合，我们可以轻松实现下拉框的级联效果，提供用户友好的界面和流畅的交互体验。在实际项目中，可能还需要考虑错误处理、数据缓存、异步加载优化等问题，以提高应用的性能和...
标题中的“jquery 省市联动下拉框”是指在网页设计中，使用jQuery库实现的一个功能，允许用户从一个下拉框选择省份后，另一个下拉框会自动更新为对应省份的城市列表。这种功能常见于需要用户输入详细地址的表单中，...
2. 编写jQuery事件监听器：当用户在省份下拉框中选择一个省份时，触发一个函数。 3. 使用Ajax发送请求：这个函数将使用jQuery的$.ajax方法向服务器发送请求，请求参数可能包含选中的省份ID。 4. 处理服务器响应：...
这可以通过JQuery或者其他JavaScript库实现，向服务器发送一个请求，服务器响应新的选项列表，然后在客户端动态更新下拉框。 5. **JSON数据交换**：在Ajax请求中，服务器端通常会返回JSON格式的数据，因为JSON易于...
本文将深入探讨jQuery城市级联插件的原理、实现方式以及应用。 一、jQuery城市级联插件的原理 城市级联插件基于jQuery的核心功能，利用DOM操作、事件监听和Ajax异步请求等技术实现。当用户选择一个国家或省份时，...
6. **后台处理**：在Servlet或Controller中，你需要处理HTTP请求，执行SQL查询，然后将结果转换为JSON： ```java // 获取省份数据 List<Province> provinces = queryProvinces(); response.setContentType(...
总之，这个例子提供了一个完整的jQuery级联下拉框的实现，结合了前端的动态更新和后端的数据库交互，对于初学者和开发者来说都是一个很好的学习和参考素材。理解并实践这个例子，有助于提升你在实际项目中处理类似...