jquery级联下拉框
$(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","p_w_picpaths/" + carimgname).load(function(){//隐藏loading图片$(".carloading").hide();//显示汽车图片carimg.attr("src","p_w_picpaths/" + carimgname).show();});//3.修改汽车图片节点的src的值,让汽车图片显示出来//carimg.attr("src","p_w_picpaths/" + carimgname).show();//4.使汽车图片的节点显示出来});//给数据装载中的节点定义ajax事件,实现动画提示效果$(".loading").ajaxStart(function(){$(this).css("visibility","visible");$(this).animate({opacity: 1},0);}).ajaxStop(function(){$(this).animate({opacity: 0},500);}); })
<!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="p_w_picpaths/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="p_w_picpaths/pfeil.gif" alt="有数据" /></span><span class="cartype">汽车类型:<select></select><img src="p_w_picpaths/pfeil.gif" alt="有数据" /></span><span class="wheeltype">车轮类型:<select></select></span></div><div class="carp_w_picpath"><p><img src="p_w_picpaths/img-loading.gif" alt="图片装载中" class="carloading" /></p><p><img src="" alt="汽车图片" class="carimg"/></p></div></body>
</html>
转载于:https://blog.51cto.com/tianxingzhe/1733587
jquery级联下拉框相关推荐
- 级联查询ajax,Jquery+Ajax下拉框级联查询
Jquery代码 $(function(){ //提交事件 $("#ImageButton1").click(function(){ //省Id var provinceId=$( ...
- 级联下拉框效果,动态加载图片
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- ajax 下拉框 保留,Ajax生成select级联下拉框和清空多余选项
Ajax生成select级联下拉框和清空多余选项 实现效果 function professionType(){ var obj=document.getElementById("下拉框id ...
- Ext JS - Combobox 加载下拉框数据 级联下拉框
Combobox 加载下拉框数据 点击下拉框,数据从后台加载,是很常见的需求.如下图: View 中下拉框 dockedItems : [ {dock : 'top',xtype : 'toolbar ...
- jquery对下拉框的操作
<script type="text/javascript"></script> jQuery对下拉框的操作 /获取第一个option的值 $('#test ...
- php下拉列表框 是隐藏变色的代码,jQuery设置下拉框显示与隐藏效果的方法分析...
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() ...
- Excel 2019:二级级联下拉框设置
Execl 2019:二级级联下拉框 场景需求 实现效果展示 二级级联设置步骤 1.填写基础信息 2.设置一级数据验证 3.设置依赖于一级选择的二级下拉内容 场景需求 当我们需要规范输入的数据时,会用 ...
- jsf的初步使用(包括jsf框架的引入、用户登录、自定义表单验证、valueChangeEvent值变更事件处理做的级联下拉框)
jsf初步使用 一.新建一个web项目MyJSF 直接把生成index.jsp和web.xml勾选上生成对应的文件. 在web项目跟目录下(一般是web或者是WebRoot,也可以自己指定,本人用的是 ...
- html下拉菜单省对应的市,javascript基于DOM实现省市级联下拉框的方法
省市级联下拉框 var provs = { "江西省": ["南昌市", "景德镇", "九江", "鹰潭&q ...
最新文章
- Go 学习笔记(39)— Go 反射
- autoware中的交通灯识别(八)
- 阿里云视频云编码优化的思考与发现
- 练习三十七:对获取数据进行排序
- 覆盖ftp服务器上面的图片后网站的原图为什么不变呀?,Win7下架设FTP服务器失败的原图...
- java sublist_java中的subList
- Linux运维跳槽40道面试精华题
- 黑马程序员 Python学习笔记之 判断(if)语句
- 发那科机器人圆弧指令怎么用_发那科机器人的指令如何编辑
- elpida颗粒_内存涨价三星背锅,晶圆颗粒远远不止这几家!
- Ego Graph概念介绍
- 福禄克网络VERSIV(威测)电缆认证系统实现ROI更大化
- ACG识图搜索引擎整合及优势分析
- 报错:Web server failed to start. Port 8080 was already in use
- oracle的floor用法,oracle ceil floor 函数的用法
- 嵌入式开发—交叉编译OpenCV
- 最近看到需要去学习的点(持续记录)
- 吐槽、吐槽、吐槽!!!!!!
- ffmpeg+h264_nvenc+vs2019配置编译
- springboot+阿里云短信 找不到本地包 解决