jquery级联

最新推荐文章于 2025-06-05 12:50:38 发布

谁的大王

最新推荐文章于 2025-06-05 12:50:38 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery function class 服务器 stylesheet json

本文链接：https://blog.youkuaiyun.com/sprita1/article/details/7757483

jquery 专栏收录该内容

9 篇文章

订阅专栏

js：

$(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","");           //为了显示图片时候不先显示一下上次图片，所以清除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);       //data函数用来缓存已经访问过的数据
               }, "json");       //第四个参数json表示返回的json对象会被js服务器自动转化为js对象
           } 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(){       //图片加载完成后才会执行的load里面的方法
           //隐藏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);
   });
})

客户端：

<!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>