使用JQuery实现漂亮的三级级联下拉框
2010-04-02 01:37
429 查看
/**
* 使用标题可下载本Demo
* 需要使用json.jar包
* 使用JQuery实现漂亮的三级级联下拉框
*/
//-----------------------------------------------jsp-----------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<title>下拉级联菜单</title>
<link rel="stylesheet" type="text/css" href="css/chainSelect.css">
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript" src="js/chainSelect.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>
<c:forEach items="${CARLIST}" var="car">
<option value="${car.carId}">
${car.carName}
</option>
</c:forEach>
</select> </span>
<span class="cartype"> <img src="images/pfeil.gif" alt="" />
汽车类型： <select></select> </span>
<span class="wheeltype"> <img src="images/pfeil.gif" alt="" />
轮胎类型： <select></select> </span>
</div>
<div class="carimage">
<p>
<img src="images/img-loading.gif" alt="imaloading"
class="carloading" />
</p>
<p>
<img src="" alt="汽车图片" class="carimg" />
</p>
</div>
</body>
</html>
//-----------------------------------------------css-----------------------------------------------
.loading{
margin:0 auto;
visibility:hidden;
}
.loading p {
text-align: center;
}
p{
margin: 0;
}
.car,.carimage{
text-align: center;
}
.cartype,.wheeltype,.carloading,.carimg
{
display: none;
}
//------------------------------------------------js-----------------------------------------------
$(document).ready(function(){
//找到三个下拉框
var carnameSelect = $(".carname").children("select");
var cartypeSelect = $(".cartype").children("select");
var wheelSelect = $(".wheeltype").children("select");
//获取要显示的汽车图片
var carimg = $(".carimg");
//给三个下拉框注册事件
/**
* 第一个下拉框change事件
*/
carnameSelect.change(function(){
//只要第一个下拉框有变化则隐藏第三个下拉框
wheelSelect.parent().hide();
//隐藏汽车图片 attr：先清空上次src图片路径避免下一次先显示一次
carimg.hide().attr("src","");
//1、找到下拉框的值
var carnameValue = $(this).val();
//2、如果下拉框所选值不为空，则将该值传送给服务器
if(carnameValue != "")
{
/**
* 如果缓存为空 则请求服务器端数据
*/
if(!carnameSelect.data(carnameValue))
{
$.post("FindCarTypeByCarId",{keyword:carnameValue,type:"top"},function(data){
//接收服务器返回汽车类型---
// 如果返回的数据不为空
if(data.length !=0)
{
//解析返回的汽车类型数据，并填充到汽车类型的下拉框中
//先清空上次请求数据
cartypeSelect.html("");
$("<option value=''>" + "请选择汽车类型"+ "</option>").appendTo(cartypeSelect);
for(var i = 0;i<data.length;i++)
{
$("<option value='" + data[i].carTypeId + "'>" + data[i].carTypeName + "</option>").appendTo(cartypeSelect);
}
//让第二个下拉框显示
cartypeSelect.parent().show();
//让第一个后面的指示图片显示出来
carnameSelect.next().hide();
}
else
{
alert(carnameValue+"为空");
}
/*
* 将从服务器中获取的数据缓存起来
* data("缓存名称","缓存的对象")
*/
carnameSelect.data(carnameValue,data);
//alert("缓存了数据……");
},"json");
}
else
{
//---获取缓存中的数据
var data = carnameSelect.data(carnameValue);
if(data.length !=0)
{
cartypeSelect.html("");
$("<option value=''>" + "请选择汽车类型"+ "</option>").appendTo(cartypeSelect);
for(var i = 0;i<data.length;i++)
{
$("<option value='" + data[i].carTypeId + "'>" + data[i].carTypeName + "</option>").appendTo(cartypeSelect);
}
//让第二个下拉框显示
cartypeSelect.parent().show();
//让第一个后面的指示图片显示出来
carnameSelect.next().hide();
}
else
{
alert(carnameValue+"为空");
}
}
}else
{
//如果下拉框所选的值为空，则要隐藏第二个下拉框的span要隐藏以来，
cartypeSelect.parent().hide();
//第一个下拉框后面指示的图片也要隐藏起来
cartypeSelect.next().hide();
}
})
/**
* 第二个下拉框change事件
*/
cartypeSelect.change(function() {
//隐藏汽车图片 attr：先清空上次src图片路径避免下一次先显示一次
carimg.hide().attr("src","");
var cartypeValue = $(this).val();
if(cartypeValue != "")
{
//如果没有缓存
if(!cartypeSelect.data(cartypeValue))
{
$.post("findWheelTypeByCarTypeId",{keyword:cartypeValue,type:"sub"},function(data){
if(data.length !=0)
{
wheelSelect.html("");
$("<option value=''>" + "请选择车轮类型"+ "</option>").appendTo(wheelSelect);
for(var i = 0;i<data.length;i++)
{
$("<option value='" + data[i].wheelTypeId + "'>" + data[i].wheelTypeName + "</option>").appendTo(wheelSelect);
}
wheelSelect.parent().show();
wheelSelect.next().hide();
}
else
{
alert(carnameValue+"为空");
}
/**
* 缓存数据
*/
cartypeSelect.data(cartypeValue,data);
//alert("缓存了数据……");
},"json");
}else
{
//获取缓存数据
var data = cartypeSelect.data(cartypeValue);
if(data.length !=0)
{
//alert("得到了缓存数据……");
wheelSelect.html("");
$("<option value=''>" + "请选择车轮类型"+ "</option>").appendTo(wheelSelect);
for(var i = 0;i<data.length;i++)
{
$("<option value='" + data[i].wheelTypeId + "'>" + data[i].wheelTypeName + "</option>").appendTo(wheelSelect);
}
wheelSelect.parent().show();
wheelSelect.next().hide();
}
else
{
alert(carnameValue+"为空");
}
}
}else
{
wheelSelect.parent().hide();
wheelSelect.next().hide();
}
})
/**
* 第三个下拉框事件
*/
wheelSelect.change(function(){
//获取三个下拉框中的值，便于拼接图片名称
var carname = carnameSelect.val();
var cartypename = cartypeSelect.val();
var wheelname = $(this).val();
//拼接图片名称
var carimageSrc = "images/"+ carname +"_"+ cartypename +"_"+ wheelname + ".jpg";
//先隐藏上次装载的图片
carimg.hide();
//显示loading图片
$(".carloading").show();
//通过javaScript的Image对象预装载显示图片
var carimage = new Image();
$(carimage).attr("src",carimageSrc).load(function(){
//-------------加载完成后执行的
//隐藏loading图片
$(".carloading").hide();
//显示汽车图片
//carimg.attr("src",carimageSrc).show();
//实现淡出动画效果
carimg.attr("src",carimageSrc);
carimg.animate({
left: 50, opacity: 'show'
}, { duration: 900 });
});
})
//给数据装载中的节点定义ajax事件，实现动画提示效果
$(".loading").ajaxStart(function(){
$(this).css("visibility","visible");
//animate：用于创建自定义动画的函数。
//opacity:0看不见 1:看得见
$(this).animate({
opacity:1
},0)
}).ajaxStop(function(){
$(this).animate({
opacity:0
},500); //500毫秒逐渐淡出
});
})
//-----------------------------------------------服务器端java代码----------------------------------
/**
*查找所有汽车厂商
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
CarDAO carDAO = new CarDAOImpl();
List carList = carDAO.findCarAll();
System.out.println("汽车厂商总数："+carList.size());
//保存显示集合
request.setAttribute("CARLIST", carList);
request.getRequestDispatcher("chainSelect.jsp").forward(request,
response);
}
/**
*查找所有汽车类型
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
//获取第一个下拉框中的值 通过keyword获取
String firstValue = request.getParameter("keyword");
String top = request.getParameter("top");
int carId = Integer.parseInt(URLDecoder.decode(firstValue, "GBK"));
CarTypeDAO carTypeDAO = new CarTypeDAOImpl();
List carTypeList = carTypeDAO.findCarTypeByCarId(carId);
////转换为js数据对象
JSONArray json = JSONArray.fromObject(carTypeList);
out.print(json.toString());
}
/**
*查找所有轮胎类型
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
// 获取第二个下拉框中的值
String secondValue = request.getParameter("keyword");
int carTypeId = Integer.parseInt(URLDecoder.decode(secondValue, "GBK"));
WheelTypeDAO wheelTypeDAO = new WheelTypeDAOImpl();
//调用业务方法
List wheelList = wheelTypeDAO.findWheelTypeByCarTypeId(carTypeId);
//转换为js数据对象
JSONArray json = JSONArray.fromObject(wheelList);
out.print(json.toString());
}
/**
*dto 及 dao包中的代码省略
*/
* 使用标题可下载本Demo
* 需要使用json.jar包
* 使用JQuery实现漂亮的三级级联下拉框
*/
//-----------------------------------------------jsp-----------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<title>下拉级联菜单</title>
<link rel="stylesheet" type="text/css" href="css/chainSelect.css">
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript" src="js/chainSelect.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>
<c:forEach items="${CARLIST}" var="car">
<option value="${car.carId}">
${car.carName}
</option>
</c:forEach>
</select> </span>
<span class="cartype"> <img src="images/pfeil.gif" alt="" />
汽车类型： <select></select> </span>
<span class="wheeltype"> <img src="images/pfeil.gif" alt="" />
轮胎类型： <select></select> </span>
</div>
<div class="carimage">
<p>
<img src="images/img-loading.gif" alt="imaloading"
class="carloading" />
</p>
<p>
<img src="" alt="汽车图片" class="carimg" />
</p>
</div>
</body>
</html>
//-----------------------------------------------css-----------------------------------------------
.loading{
margin:0 auto;
visibility:hidden;
}
.loading p {
text-align: center;
}
p{
margin: 0;
}
.car,.carimage{
text-align: center;
}
.cartype,.wheeltype,.carloading,.carimg
{
display: none;
}
//------------------------------------------------js-----------------------------------------------
$(document).ready(function(){
//找到三个下拉框
var carnameSelect = $(".carname").children("select");
var cartypeSelect = $(".cartype").children("select");
var wheelSelect = $(".wheeltype").children("select");
//获取要显示的汽车图片
var carimg = $(".carimg");
//给三个下拉框注册事件
/**
* 第一个下拉框change事件
*/
carnameSelect.change(function(){
//只要第一个下拉框有变化则隐藏第三个下拉框
wheelSelect.parent().hide();
//隐藏汽车图片 attr：先清空上次src图片路径避免下一次先显示一次
carimg.hide().attr("src","");
//1、找到下拉框的值
var carnameValue = $(this).val();
//2、如果下拉框所选值不为空，则将该值传送给服务器
if(carnameValue != "")
{
/**
* 如果缓存为空 则请求服务器端数据
*/
if(!carnameSelect.data(carnameValue))
{
$.post("FindCarTypeByCarId",{keyword:carnameValue,type:"top"},function(data){
//接收服务器返回汽车类型---
// 如果返回的数据不为空
if(data.length !=0)
{
//解析返回的汽车类型数据，并填充到汽车类型的下拉框中
//先清空上次请求数据
cartypeSelect.html("");
$("<option value=''>" + "请选择汽车类型"+ "</option>").appendTo(cartypeSelect);
for(var i = 0;i<data.length;i++)
{
$("<option value='" + data[i].carTypeId + "'>" + data[i].carTypeName + "</option>").appendTo(cartypeSelect);
}
//让第二个下拉框显示
cartypeSelect.parent().show();
//让第一个后面的指示图片显示出来
carnameSelect.next().hide();
}
else
{
alert(carnameValue+"为空");
}
/*
* 将从服务器中获取的数据缓存起来
* data("缓存名称","缓存的对象")
*/
carnameSelect.data(carnameValue,data);
//alert("缓存了数据……");
},"json");
}
else
{
//---获取缓存中的数据
var data = carnameSelect.data(carnameValue);
if(data.length !=0)
{
cartypeSelect.html("");
$("<option value=''>" + "请选择汽车类型"+ "</option>").appendTo(cartypeSelect);
for(var i = 0;i<data.length;i++)
{
$("<option value='" + data[i].carTypeId + "'>" + data[i].carTypeName + "</option>").appendTo(cartypeSelect);
}
//让第二个下拉框显示
cartypeSelect.parent().show();
//让第一个后面的指示图片显示出来
carnameSelect.next().hide();
}
else
{
alert(carnameValue+"为空");
}
}
}else
{
//如果下拉框所选的值为空，则要隐藏第二个下拉框的span要隐藏以来，
cartypeSelect.parent().hide();
//第一个下拉框后面指示的图片也要隐藏起来
cartypeSelect.next().hide();
}
})
/**
* 第二个下拉框change事件
*/
cartypeSelect.change(function() {
//隐藏汽车图片 attr：先清空上次src图片路径避免下一次先显示一次
carimg.hide().attr("src","");
var cartypeValue = $(this).val();
if(cartypeValue != "")
{
//如果没有缓存
if(!cartypeSelect.data(cartypeValue))
{
$.post("findWheelTypeByCarTypeId",{keyword:cartypeValue,type:"sub"},function(data){
if(data.length !=0)
{
wheelSelect.html("");
$("<option value=''>" + "请选择车轮类型"+ "</option>").appendTo(wheelSelect);
for(var i = 0;i<data.length;i++)
{
$("<option value='" + data[i].wheelTypeId + "'>" + data[i].wheelTypeName + "</option>").appendTo(wheelSelect);
}
wheelSelect.parent().show();
wheelSelect.next().hide();
}
else
{
alert(carnameValue+"为空");
}
/**
* 缓存数据
*/
cartypeSelect.data(cartypeValue,data);
//alert("缓存了数据……");
},"json");
}else
{
//获取缓存数据
var data = cartypeSelect.data(cartypeValue);
if(data.length !=0)
{
//alert("得到了缓存数据……");
wheelSelect.html("");
$("<option value=''>" + "请选择车轮类型"+ "</option>").appendTo(wheelSelect);
for(var i = 0;i<data.length;i++)
{
$("<option value='" + data[i].wheelTypeId + "'>" + data[i].wheelTypeName + "</option>").appendTo(wheelSelect);
}
wheelSelect.parent().show();
wheelSelect.next().hide();
}
else
{
alert(carnameValue+"为空");
}
}
}else
{
wheelSelect.parent().hide();
wheelSelect.next().hide();
}
})
/**
* 第三个下拉框事件
*/
wheelSelect.change(function(){
//获取三个下拉框中的值，便于拼接图片名称
var carname = carnameSelect.val();
var cartypename = cartypeSelect.val();
var wheelname = $(this).val();
//拼接图片名称
var carimageSrc = "images/"+ carname +"_"+ cartypename +"_"+ wheelname + ".jpg";
//先隐藏上次装载的图片
carimg.hide();
//显示loading图片
$(".carloading").show();
//通过javaScript的Image对象预装载显示图片
var carimage = new Image();
$(carimage).attr("src",carimageSrc).load(function(){
//-------------加载完成后执行的
//隐藏loading图片
$(".carloading").hide();
//显示汽车图片
//carimg.attr("src",carimageSrc).show();
//实现淡出动画效果
carimg.attr("src",carimageSrc);
carimg.animate({
left: 50, opacity: 'show'
}, { duration: 900 });
});
})
//给数据装载中的节点定义ajax事件，实现动画提示效果
$(".loading").ajaxStart(function(){
$(this).css("visibility","visible");
//animate：用于创建自定义动画的函数。
//opacity:0看不见 1:看得见
$(this).animate({
opacity:1
},0)
}).ajaxStop(function(){
$(this).animate({
opacity:0
},500); //500毫秒逐渐淡出
});
})
//-----------------------------------------------服务器端java代码----------------------------------
/**
*查找所有汽车厂商
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
CarDAO carDAO = new CarDAOImpl();
List carList = carDAO.findCarAll();
System.out.println("汽车厂商总数："+carList.size());
//保存显示集合
request.setAttribute("CARLIST", carList);
request.getRequestDispatcher("chainSelect.jsp").forward(request,
response);
}
/**
*查找所有汽车类型
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
//获取第一个下拉框中的值 通过keyword获取
String firstValue = request.getParameter("keyword");
String top = request.getParameter("top");
int carId = Integer.parseInt(URLDecoder.decode(firstValue, "GBK"));
CarTypeDAO carTypeDAO = new CarTypeDAOImpl();
List carTypeList = carTypeDAO.findCarTypeByCarId(carId);
////转换为js数据对象
JSONArray json = JSONArray.fromObject(carTypeList);
out.print(json.toString());
}
/**
*查找所有轮胎类型
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
// 获取第二个下拉框中的值
String secondValue = request.getParameter("keyword");
int carTypeId = Integer.parseInt(URLDecoder.decode(secondValue, "GBK"));
WheelTypeDAO wheelTypeDAO = new WheelTypeDAOImpl();
//调用业务方法
List wheelList = wheelTypeDAO.findWheelTypeByCarTypeId(carTypeId);
//转换为js数据对象
JSONArray json = JSONArray.fromObject(wheelList);
out.print(json.toString());
}
/**
*dto 及 dao包中的代码省略
*/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用JQuery实现漂亮的三级级联下拉框
- [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号，在Asp.net 获取不到的，解决办法 .Net程序员 初学Ubuntu ，配置Nignix 夜深了，写了个JQuery的省市区三级级联效果
- jQuery解析xml文件，使用get方法实现省市县三级联动下拉框
- 使用jquery 匿名内部类实现 下拉列表三级联动
- 使用jquery和json实现系部与班级的级联
- 使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
- 编写“使用Ajax实现三级级联菜单”中的错误总结
- JS +XML +Jquery 实现三级联动菜单,自己封装的一个对象方便使用
- KendoUi中KendoDropDownList控件的使用——三级级联模块的实现
- 【JQuery】使用JQuery实现城市两级或三级联动（下拉菜单）
- SharePoint：扩展DVWP - 第20部分：使用jQuery实现级联下拉框
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
- asp.net 使用jquery 和ajax 实现三级联动
- 使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
- jquery结合CSS使用validate实现漂亮的验证
- asp.net 使用jquery 和ajax 实现三级联动
- 使用Ajax实现三级级联菜单
- KendoUi中KendoDropDownList控件的使用——三级级联模块的实现
- 使用jquery-combobox实现select下拉框多选之后，如何将下拉框的值传给input隐藏域
- 使用jQuery实现select级联效果