jQuery效果之级联下拉框
2015-10-27 10:36
573 查看
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery实例-级联下拉框效果</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="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;
}
J***ASCRIPT:
$(document).ready(function(){
//找到三个下拉框
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只要第一个下拉框内容有变化，第三个下拉框都要先隐藏起来
wheeltypeSelect.parent().hide();
//1.2将汽车图片隐藏起来
carimg.hide().attr("src","");
//2.如果值不为空，则将下拉框的值传送给服务器
if (carnameValue != "") {
if (!carnameSelect.data(carnameValue)) {
$.post("ChainSelect",{keyword: 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);
}
//2.2.1汽车类型的下拉框显示出
cartypeSelect.parent().show();
//2.2.2第一个下拉框后面的指示图片显示出来
carnameSelect.next().show();
} else {
//2.3没有任何汽车类型的数据
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
carnameSelect.data(carnameValue, data);
}, "json");
} else {
var data = carnameSelect.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第一个下拉框后面的指示图片显示出来
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();
//1.1将汽车图片隐藏起来
carimg.hide().attr("src","");
//2.如果值不为空，则将下拉框的值传送给服务器
if (cartypeValue != "") {
if (!cartypeSelect.data(cartypeValue)) {
$.post("ChainSelect",{keyword: cartypeValue, type: "sub"},function(data){
//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(wheeltypeSelect);
}
//2.2.1车轮类型的下拉框显示出
wheeltypeSelect.parent().show();
//2.2.2第二个下拉框后面的指示图片显示出来
cartypeSelect.next().show();
} else {
//2.3没有任何汽车类型的数据
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
cartypeSelect.data(cartypeValue, data);
}, "json");
} else {
var data = cartypeSelect.data(cartypeValue);
//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(wheeltypeSelect);
}
//2.2.1车轮类型的下拉框显示出
wheeltypeSelect.parent().show();
//2.2.2第二个下拉框后面的指示图片显示出来
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";//得到资源名
//3.显示出loading的图片
carimg.hide();
$(".carloading").show();
//4.通过Javascript中的Image对象预装载图片
var cacheimg = new Image();
$(cacheimg).attr("src","images/" + carimgname).load(function(){
//隐藏loading图片
$(".carloading").hide();
//显示汽车图片
carimg.attr("src","images/" + carimgname).show();
});
//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);
});
})
需要知道的知识：
1.img标签的alt属性要写上，在图片尚未装载进来或图片不存在时，这个属性的文字信息会显示出来
2.select表示下拉框，下拉框的每一项都是一个option，option开始结尾标签中的内容会显示在页面上，value属性的值则是用于在JQuery中用val方法获取并发送给服务器的。定义了selected的属性值为selected时，表示当前option被选中
3.div元素居中显示的方法：给div设定宽度，然后margin-left和margin-right的值都为auto。简写方法是margin: 0 auto;
4.html的p标签表示一个段落的内容，其中的内容会独占一行或多行，后面的内容会另起一行显示
5.为了让p中文字和图片居中，可以使用text-align属性，属性值为center。p标签默认有margin-top和margin-bottom的值，需要的话可以通过css清除
6.visibility的属性值为hidden时，元素隐藏，但是和display为none不同的时，在页面中任然占据一定空间，只是不显示
7.多个选择器如果有相同的属性值，可以放在一起定义，选择器之间用逗号分割
8.change方法对应标准Javascript中的onchange事件，可以处理下拉框内容变化的事件
9.parent方法可以获得一个节点的父节点
10.next方法可以获得一个节点的下一个兄弟节点，对应的previous方法可以获得一个节点的上一个兄弟节点
11.$.post方法可以和服务器端发起post的异步请求。第一个参数是请求的服务器端地址，第二个参数是发送给服务器端的数据，参数是Javascript的对象，采用名值对的方式表示，第三个参数是回调方法，第四个参数指示服务器端返回的数据类型，JQuery会根据这个参数帮我们进行转换。get方法只有第二个参数不同，其他几个参数用法相同
12.Javascript中的简单对象定义方式是{key1: value1, key2: value2}
13.JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容，比如{key1: value1, key2: [1,2,3]}或[1,2,{key2: value2}]
14.可以直接$(“<option></option>”)的方法来建立下拉框中的选项，然后用appendTo这样的方法加入到下拉框中
15.attr方法可以设置或获取某一个节点的属性值
16.ajaxStart在每一个JQuery发出的ajax请求开始前执行，ajaxStop在JQuery队列中所有的ajax请求结束后执行，ajaxComplete在每一个JQuery发出的ajax请求结束后执行
17.fadeOut和fadeIn可以实现淡出淡入的效果，参数内容和slideUp，slideDown方法类似。
18.animate方法可以实现任意的动画效果，可以控制某个css属性在某个时间内进行变化，从而达到动画的效果
19.opacity可以改变元素的透明度，IE中使用过滤器实现，100表示完全显示，0表示完全透明，非IE浏览器使用opacity属性，1表示完全显示，0表示透明。JQuery在animate方法中屏蔽了浏览器差异，直接使用opacity就可以达到淡入淡出的效果。
20.data方法可以用于缓存数据。缓存可以提高系统的运行效率，降低服务器端的负荷
21.可以使用Javascript中的Image对象来预装载图片，这样可以知道图片何时装载完成，以便给出一些图片装载的提示信息。
22.load方法可以对应Javascript中的onload事件，本例中用于捕捉图片加载完成的事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery实例-级联下拉框效果</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="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;
}
J***ASCRIPT:
$(document).ready(function(){
//找到三个下拉框
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只要第一个下拉框内容有变化，第三个下拉框都要先隐藏起来
wheeltypeSelect.parent().hide();
//1.2将汽车图片隐藏起来
carimg.hide().attr("src","");
//2.如果值不为空，则将下拉框的值传送给服务器
if (carnameValue != "") {
if (!carnameSelect.data(carnameValue)) {
$.post("ChainSelect",{keyword: 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);
}
//2.2.1汽车类型的下拉框显示出
cartypeSelect.parent().show();
//2.2.2第一个下拉框后面的指示图片显示出来
carnameSelect.next().show();
} else {
//2.3没有任何汽车类型的数据
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
carnameSelect.data(carnameValue, data);
}, "json");
} else {
var data = carnameSelect.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第一个下拉框后面的指示图片显示出来
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();
//1.1将汽车图片隐藏起来
carimg.hide().attr("src","");
//2.如果值不为空，则将下拉框的值传送给服务器
if (cartypeValue != "") {
if (!cartypeSelect.data(cartypeValue)) {
$.post("ChainSelect",{keyword: cartypeValue, type: "sub"},function(data){
//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(wheeltypeSelect);
}
//2.2.1车轮类型的下拉框显示出
wheeltypeSelect.parent().show();
//2.2.2第二个下拉框后面的指示图片显示出来
cartypeSelect.next().show();
} else {
//2.3没有任何汽车类型的数据
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
cartypeSelect.data(cartypeValue, data);
}, "json");
} else {
var data = cartypeSelect.data(cartypeValue);
//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(wheeltypeSelect);
}
//2.2.1车轮类型的下拉框显示出
wheeltypeSelect.parent().show();
//2.2.2第二个下拉框后面的指示图片显示出来
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";//得到资源名
//3.显示出loading的图片
carimg.hide();
$(".carloading").show();
//4.通过Javascript中的Image对象预装载图片
var cacheimg = new Image();
$(cacheimg).attr("src","images/" + carimgname).load(function(){
//隐藏loading图片
$(".carloading").hide();
//显示汽车图片
carimg.attr("src","images/" + carimgname).show();
});
//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);
});
})
需要知道的知识：
1.img标签的alt属性要写上，在图片尚未装载进来或图片不存在时，这个属性的文字信息会显示出来
2.select表示下拉框，下拉框的每一项都是一个option，option开始结尾标签中的内容会显示在页面上，value属性的值则是用于在JQuery中用val方法获取并发送给服务器的。定义了selected的属性值为selected时，表示当前option被选中
3.div元素居中显示的方法：给div设定宽度，然后margin-left和margin-right的值都为auto。简写方法是margin: 0 auto;
4.html的p标签表示一个段落的内容，其中的内容会独占一行或多行，后面的内容会另起一行显示
5.为了让p中文字和图片居中，可以使用text-align属性，属性值为center。p标签默认有margin-top和margin-bottom的值，需要的话可以通过css清除
6.visibility的属性值为hidden时，元素隐藏，但是和display为none不同的时，在页面中任然占据一定空间，只是不显示
7.多个选择器如果有相同的属性值，可以放在一起定义，选择器之间用逗号分割
8.change方法对应标准Javascript中的onchange事件，可以处理下拉框内容变化的事件
9.parent方法可以获得一个节点的父节点
10.next方法可以获得一个节点的下一个兄弟节点，对应的previous方法可以获得一个节点的上一个兄弟节点
11.$.post方法可以和服务器端发起post的异步请求。第一个参数是请求的服务器端地址，第二个参数是发送给服务器端的数据，参数是Javascript的对象，采用名值对的方式表示，第三个参数是回调方法，第四个参数指示服务器端返回的数据类型，JQuery会根据这个参数帮我们进行转换。get方法只有第二个参数不同，其他几个参数用法相同
12.Javascript中的简单对象定义方式是{key1: value1, key2: value2}
13.JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容，比如{key1: value1, key2: [1,2,3]}或[1,2,{key2: value2}]
14.可以直接$(“<option></option>”)的方法来建立下拉框中的选项，然后用appendTo这样的方法加入到下拉框中
15.attr方法可以设置或获取某一个节点的属性值
16.ajaxStart在每一个JQuery发出的ajax请求开始前执行，ajaxStop在JQuery队列中所有的ajax请求结束后执行，ajaxComplete在每一个JQuery发出的ajax请求结束后执行
17.fadeOut和fadeIn可以实现淡出淡入的效果，参数内容和slideUp，slideDown方法类似。
18.animate方法可以实现任意的动画效果，可以控制某个css属性在某个时间内进行变化，从而达到动画的效果
19.opacity可以改变元素的透明度，IE中使用过滤器实现，100表示完全显示，0表示完全透明，非IE浏览器使用opacity属性，1表示完全显示，0表示透明。JQuery在animate方法中屏蔽了浏览器差异，直接使用opacity就可以达到淡入淡出的效果。
20.data方法可以用于缓存数据。缓存可以提高系统的运行效率，降低服务器端的负荷
21.可以使用Javascript中的Image对象来预装载图片，这样可以知道图片何时装载完成，以便给出一些图片装载的提示信息。
22.load方法可以对应Javascript中的onload事件，本例中用于捕捉图片加载完成的事件
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery each,click ,元素选择器
- jquery图文列表鼠标点击下拉显示文字说明内容
- jquery arguments
- 了解jQuery
- jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
- 基于SpringMVC与jquery的ajax提交表单的若干情况详解
- jQuery停止动画和判断是否处于动画状态
- JQM[jquery mobile] 实战经验汇总
- jQuery无刷新分页完整实例代码
- 第33日 我疯了集成平台（六）-步履轻盈JQuery(四)
- 10003---使用jQuery实现Ajax
- jQuery无刷新分页完整实例代码
- 基于Jquery+div+css实现弹出登录窗口(代码超简单)
- jQuery+PHP+MySQL二级联动下拉菜单实例讲解
- JQuery Datatables在IE遇到的问题（1）
- JQuery Datatables在IE6遇到的问题（2）
- 三、jQuery--jQuery基础--jQuery基础课程--第3章 jQuery过滤性选择器
- 四，jquery事件绑定（bind）和取消事件（unbind）
- Jcrop_jQuery图片裁剪插件
- jquery 筛选元素 (2)