jQuery实战-级联下拉框

CandyGoo

2012-01-27

关注关注

jQuery实战-级联下拉框:

chainselect.html

<html>
<head>
<title>级联下拉框</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>
<link type=”text/css” rel=”stylesheet” href=”css/chainselect.css” />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/ chainselect.js”></script>
</head>
<body>
<div class=”loading”>
<p><img src=”imags/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=”VM >大众</option>
</select>
<img src=images/pfeil.gif” alt=”有数据” />
</span>
<span class=”cartype”>
汽车类型：
<select></select>
<img src=”images/pfeil.gif” alt=”有数据” />
</span>
<span class=”whelltype”>
车轮类型：
<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>

chainselect.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 atuo;
text-align: center;
}
.carimage {
text-align: center;
}
.cartype , .wheeltype , .carloading, .carimg, .car img {
display: none;
}

chainselect.js

$(document).ready(function() {
//找到三个下拉框
var carnameSelect = $(“.carname”).children(“select”);
var cartypeSelect + $(“.cartype”).children(“select”);
var wheeltypeSelect = $(“.whelltype”).children(“select”);
var carimg = $(“.carimg”);
//给三个下拉框注册事件
carnameSelect.change(function(){
//1. 需要获得当前下拉框的值
var carnameValue = $(this).val():
wheeltypeSelect.parent().hide();
carimg.hide().attr(“src”,””);
//2. 如果值不为空，则将下拉框的值传送给服务器
if(carnameValue != “”) {
if(!carnameSelect.data(carnameValue)) {
$.post(“ChainSelect”,{keyward: carnameValue,type: top}, function(data){
//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);
cartypeSelect.parent().show(); //汽车类型的下拉框显示出
carnameSelect.next().show(); //第一个下拉框后面的指示图片显示出来
}
} else {
//2.3 没有任何汽车类型的数据
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
carnameSelect.data(carnameValue, data);
}, ”json”)
} else {
var data = cartypeSelect.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] + “’>” + data[i] + “</option>”).appendTo(cartypeSelect);
cartypeSelect.parent().show(); //汽车类型的下拉框显示出
carnameSelect.next().show(); //第一个下拉框后面的指示图片显示出来
}
} else {
//2.3 没有任何汽车类型的数据
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
}
} else {
//3. 如果值为空，那么第二个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
});
cartypeSelect.change(function(){
//1. 需要获得当前下拉框的值
var cartypeValue = $(this).val():
carimg.hide().attr(“src”,””);;
//2. 如果值不为空，则将下拉框的值传送给服务器
if(cartypeValue != “”) {
if(!cartypeSelect.data(cartypeValue)) {
$.post(“ChainSelect”,{keyward: cartypeValue,type: sub}, function(data){
//2.1 接收服务器返回的汽车类型
if(data.length != 0) {
//2.2 解析汽车类型的数据，填充到车轮类型下拉框中
carwheelSelect.html(“”);
$(“<option value=’’>请选择车轮类型</option>”).appendTo(wheeltypeSelect);
for(var i = 0; i < data.length; i++) {
$(“<option value=’” + data[i] + “’>” + data[i] + “</option>”)
.appendTo(wheeltypeSelect);
wheeltypeSelect.parent().show(); //车轮类型的下拉框显示出
cartypeSelect.next().show(); //第二个下拉框后面的指示图片显示出来
}
} else {
//2.3 没有任何汽车类型的数据
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
cartypeSelect.data(cartypeValue,data);
}, ”json”)
}else {
var data = cartypeSelect.data(cartypeValue);
if(data.length != 0) {
//2.2 解析汽车类型的数据，填充到车轮类型下拉框中
carwheelSelect.html(“”);
$(“<option value=’’>请选择车轮类型</option>”).appendTo(wheeltypeSelect);
for(var i = 0; i < data.length; i++) {
$(“<option value=’” + data[i] + “’>” + data[i] + “</option>”)
.appendTo(wheeltypeSelect);
wheeltypeSelect.parent().show(); //车轮类型的下拉框显示出
cartypeSelect.next().show(); //第二个下拉框后面的指示图片显示出来
}
} else {
//2.3 没有任何汽车类型的数据
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
}
} else {
//3. 如果值为空，那么第三个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
});
wheeltypeSelect.change(function(){
//1. 获取车轮类型
var wheeltypeValue = $(this).val();
//2. 根据汽车厂商名称，汽车类型和车轮类型的到汽车图片的文件名
var carnameValue = carnameSelect.val();
var cartypeValue = cartypeSelect.val();
var carimgname = carnameValue + “_” + cartypeValue + “_” + wheeltypeValue + “.jpg”;
carimg.hide();
$(“.carloading”).show(); //显示loading的图片
//通过javascript中的Image对象预装载图片
var cacheimg = new Image();
$(cacheimg).attr(“src”,”images/” + carimgname).load(function(){
$(“.carloading”).hide(); //隐藏loading图片
carimg.attr(“src”,”images/” + carimgname).show();
});
//3. 修改汽车图片节点的src的值，让汽车图片显示
//carimg.attr(“src”,”images/” + carimgname).show();
});
//给数据装载中的节点定义ajax事件，实现动画提示效果
$(“.loading”).ajaxStart(function(){
$(this).css(“visibility”,”visible”);
$(this).animate({
opacity: 0;
},0);
}).ajaxStop(function(){
//$(this).fadeOut(500);
$(this).animate({
opacity: 0;
},500);
});
});

CandyGoo

0 关注 0 粉丝 0 动态

关注关注

安科网

jQuery实战-级联下拉框

CandyGoo

CandyGoo

CandyGoo