<%@ 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);
});
});
分享到：
相关推荐
jquery实现无限级联下拉框的封装，实现级联时有用，代码简单实用。可以实现。
jQuery带搜索功能的下拉框，可以动态添加数据，实现级联效果。效果图参看博客：https://blog.csdn.net/BigBoySunshine/article/details/88293931
jQuery下拉框多级菜单筛选插件
自己开发的模拟select控件，除了有现有的select功能外，还实现了suggest（字词联想）功能。并可以很方便的实现级联下拉框。 基于jQuery js
开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷（之所以这么多代码是因为该级联下拉框有时只出现2个或3个），想到这类的需求其实经常都能遇到，jquery里没有这样比较好的...
效果图： 图标 (function($){ //初始化清除按钮 function initClear(target){ var jq = $(target); var opts = jq.data('combo').options; var combo = jq.data('combo').combo; var arrow = combo.find...
主要为大家详细介绍了EasyUI学习之Combobox级联下拉列表的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
重现步骤： 该问题发生在级联下拉框的情况，第一个列表改变，第二个列表的值跟着改变！ 本例中使用以下方法绑定数据： 代码如下: //绑定下拉框 //ctnSelector:下拉框ID，带#号, //jsonData:JSON数据, //txtField:...
主要介绍了jQuery实现动态生成年月日级联下拉列表,结合具体实例形式分析了jQuery日期时间运算构造级联下拉列表相关操作技巧,需要的朋友可以参考下
因为是级联，所以数据必须是树型结构的，这里的测试数据如下： 看下效果图： 1、效果图一： 2、效果图二： 3、效果图三： 由图可知，下拉框的个数并不是写死的，而是动态加载的。每当下拉框选择改变...
对于这个效果，其实我发现主要在于两点：1、jquery的筛选遍历操作；2、存储省、市、区这些数据时候的格式。另外一点是如何将获取得到的数据放到select option中（即下拉框中！） 对于第一个问题的解决，其实...
先看一下简单的效果 直接上代码 html部分 (下拉框中value的数值我是根据数据库中取出来) 城市 <select name=city lay-filter=province> <option xss=removed></option> 北京市 天津市</o
mCascader 是一款mui风格的移动端气泡级联框，支持可选择任意层级、默认值、分隔符 首先引入mui和jq库，及mui_cascader.css（cascader的样式） [removed][removed] [removed][removed] <link href=...
利用了jquery的ajax实现。用到的包有：json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js jsp页面的代码： 代码如下: <%@ page contentType=”text/html; charset=gbk”%> <%@ taglib ...