您的位置：首页 > 其它

jq实现级联下拉框效果

2010-07-19 15:15 239 查看

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>jquery5-级联下拉框</title>
<link type="text/css" rel="stylesheet" href="css/chainselect.css">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/chainselect.js"></script>
</head>
<body>
<div class="loading">
<div>
<p><img src="image/loading.gif" alt="数据装载中"/></p>

<p>数据装载中..................</p>
</div>
</div>
<div class="car">
<span class="carname">
汽车厂商：
<select>
<option value="" selected="selected">请选择厂商</option>
<option value="BMW">宝马</option>
<option value="Audi">奥迪</option>
<option value="UW">大众</option>
</select>
<img src="image/closed.gif" alt="有数据"/>
</span>
<span class="cartype">
汽车类型：
<select></select>
<img src="image/closed.gif" alt="有数据"/>
</span>
<span class="wheeltype">
车轮类型：
<select></select>
</span>
</div>
<div class="carimage">
<p><img src="image/loadingyuan.gif" alt="图片装载中" class="carloading"></p>

<p><img src="" alt="汽车图片" class="carimg"></p>
</div>
</body>
</html>

.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, .carimg, .carloading, .car img {
display: none;
}

$(function() {
//找到3个下拉框
var carnameSelect = $(".carname").children("select");
var cartypeSelect = $(".cartype").children("select");
var wheeltypeSelect = $(".wheeltype").children("select");
var carimg = $(".carimg");
//给三个下拉框注册事件
carnameSelect.change(function() {
//1.需要获得当前下拉框的值
var carnameValue = $(this).val();
//1.1只要第一个下拉框的内容有变化，第3个下拉框就要藏起来
wheeltypeSelect.parent().hide();
//1.2将汽车图片隐藏起来
carimg.hide().attr("src", "");
//2.如果值不为空，则将下拉框的值传送给服务器
if (carnameValue != "") {
if (cartypeSelect.data(carnameValue)) {
$.post("/selecttest/test", {keyword:carnameValue,type:"top"}, function() {
//2.1接收服务器返回的汽车类型
if (data.length != 0) {
//2.2解析汽车类型的数据，填充到汽车类型的下拉框中
cartypeSelect.html("");
$("<option value=''>请选择汽车类型</option>").appendTo("cartypeSelect");
for (var i = 0; i < data.length; i++) {
$("<option value='" + data[i] + "'>" + data[i] + "<option>")
.appendTo(cartypeSelect);
}
//2.2.1汽车类型的下拉框显示出来
cartypeSelect.parent().show();
//2.2.2显示image next找兄弟节点
carnameSelect.next().show();
} else {
//2.3m没有任何汽车类型的数据
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
//缓存
carnameSelect.data(carnameValue, data);
}, "json");
} else {
var data = cartypeSelect.data(carnameValue);
//2.1接收服务器返回的汽车类型
if (data.length != 0) {
//2.2解析汽车类型的数据，填充到汽车类型的下拉框中
cartypeSelect.html("");
$("<option value=''>请选择汽车类型</option>").appendTo("cartypeSelect");
for (var i = 0; i < data.length; i++) {
$("<option value='" + data[i] + "'>" + data[i] + "<option>")
.appendTo(cartypeSelect);
}
//2.2.1汽车类型的下拉框显示出来
cartypeSelect.parent().show();
//2.2.2显示image next找兄弟节点
carnameSelect.next().show();
} else {
//2.3m没有任何汽车类型的数据
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
}
} else {
//3.如果值为空，那么第2个下拉框所在的span要隐藏，第一个下拉框后面的指示图片
//也要隐藏
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}

});
cartypeSelect.change(function() {
//1.需要获得当前下拉框的值
var carntypeValue = $(this).val();
//1,1将汽车图片隐藏起来
carimg.hide().attr("src", "");
//2.如果值不为空，则将下拉框的值传送给服务器
if (carntypeValue != "") {
$.post("/selecttest/test", {keyword:carnameValue,type:"sub"}, function() {
//2.1接收服务器返回的车轮类型
if (data.length != 0) {
//2.2解析汽车类型的数据，填充到车轮类型的下拉框中
wheeltypeSelect.html("");
$("<option value=''>请选择车轮类型</option>").appendTo("wheeltypeSelect");
for (var i = 0; i < data.length; i++) {
$("<option value='" + data[i] + "'>" + data[i] + "<option>")
.appendTo(cartypeSelect);
}
//2.2.1车轮类型的下拉框显示出来
wheeltypeSelect.parent().show();
//2.2.2显示image next找兄弟节点
carntypeValue.next().show();
} else {
//2.3m没有任何汽车类型的数据
wheeltypeSelect.parent().hide();
carntypeValue.next().hide();
}
}, "html");
} else {
//3.如果值为空，那么第3个下拉框所在的span要隐藏，第一个下拉框后面的指示图片
//也要隐藏
wheeltypeSelect.parent().hide();
carntypeValue.next().hide();
}
});
wheeltypeSelect.change(function() {
//1获取车轮类型
var wheeltypeValue = $(this).val();
var carnameValue = carnameSelect.val();
var cartypeValue = cartypeSelect.val();

//2根据汽车厂商名称
var carimgname = carnameValue + "_" + cartypeValue + "_" + wheeltypeValue + ".jpg";
//3修改汽车图片接点的src的值，让汽车图片显示出来
carimg.attr("src", "images/" + carimgname).show();
//4使汽车图片的节点显示出来
});
//给数据装载中的节点定义ajax事件，实现动画提示效果
$(".loading").ajaxStart(function() {
$(this).css("visibility", "visible");
$(this).animate({
//淡入淡出效果
opacity:1
}, 0);
}).ajaxStop(function() {
$(this).animate({
//淡入淡出效果
opacity:0
}, 500);
});

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航