jQuery实战-级联下拉框


jQuery实战-级联下拉框:

chainselect.html

  1. <html>  
  2. <head>  
  3. <title>级联下拉框</title>  
  4. <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>  
  5. <link type=”text/css” rel=”stylesheet” href=”css/chainselect.css” />  
  6. <script type=”text/javascript” src=”js/jquery.js”></script>  
  7. <script type=”text/javascript” src=”js/ chainselect.js”></script>  
  8. </head>  
  9. <body>  
  10. <div class=”loading”>  
  11.     <p><img src=”imags/data-loading.gif” alt=”数据转载中” /></p>  
  12.     <p>数据转载中……</p>  
  13. </div>  
  14. <div class=”car”>  
  15.     <span class=”carname”>  
  16.     汽车厂商：   
  17.     <select>  
  18.         <option value=”” selected=”selected”>请选择汽车厂商</option>  
  19.         <option value=”BMW”>宝马</option>  
  20.         <option value=”Audi >奥迪</option>  
  21.         <option value=”VM >大众</option>  
  22.     </select>  
  23.     <img src=images/pfeil.gif” alt=”有数据” />  
  24.     </span>  
  25.     <span class=”cartype”>  
  26.     汽车类型：   
  27.     <select></select>  
  28.     <img src=”images/pfeil.gif” alt=”有数据” />  
  29.     </span>  
  30.     <span class=”whelltype”>  
  31.     车轮类型：   
  32.     <select></select>  
  33.     </span>  
  34. </div>  
  35. <div class=”carimage”>  
  36.    <p> <img src=”images/img-loading.gif” alt=”图片装载中” class=”carloading” /></p>  
  37.    <p> <img src=”” alt=”汽车图片” class=”carimg”/></p>  
  38. </div>  
  39.   
  40. </body>  
  41. </html>  

chainselect.css

  1. .loading {   
  2. width: 400px;   
  3. //margin-left: auto;   
  4. //margin-right:auto;   
  5. margin: 0 auto;   
  6. visibility: hidden;   
  7. }   
  8. .loading p {   
  9.     text-align: center;   
  10. }   
  11. p {   
  12.     margin: 0;   
  13. }   
  14. .car {   
  15. width: 500px;   
  16. margin: 0 atuo;   
  17. text-align: center;   
  18. }   
  19. .carimage {   
  20.     text-align: center;   
  21. }   
  22. .cartype , .wheeltype , .carloading, .carimg, .car img {   
  23.     display: none;   
  24. }  

chainselect.js

  1. $(document).ready(function() {   
  2. //找到三个下拉框   
  3. var carnameSelect = $(“.carname”).children(“select”);   
  4. var cartypeSelect + $(“.cartype”).children(“select”);   
  5. var wheeltypeSelect = $(“.whelltype”).children(“select”);   
  6. var carimg = $(“.carimg”);   
  7. //给三个下拉框注册事件   
  8. carnameSelect.change(function(){   
  9.     //1. 需要获得当前下拉框的值   
  10.     var carnameValue = $(this).val():   
  11.     wheeltypeSelect.parent().hide();   
  12.     carimg.hide().attr(“src”,””);   
  13.     //2. 如果值不为空，则将下拉框的值传送给服务器   
  14.     if(carnameValue != “”) {   
  15.         if(!carnameSelect.data(carnameValue)) {   
  16.         $.post(“ChainSelect”,{keyward: carnameValue,type: top}, function(data){   
  17. //2.1 接收服务器返回的汽车类型   
  18.             if(data.length != 0) {   
  19. //2.2 解析汽车类型的数据，填充到汽车类型下拉框中   
  20.     cartypeSelect.html(“”);   
  21.     $(“<option value=’’>请选择汽车类型</option>”).appendTo(cartypeSelect);   
  22.         for(var  i = 0; i < data.length; i++) {   
  23.           $(“<option value=’” + data[i] + “’>” + data[i]  + “</option>”).appendTo(cartypeSelect);   
  24.           cartypeSelect.parent().show();  //汽车类型的下拉框显示出   
  25.           carnameSelect.next().show();   //第一个下拉框后面的指示图片显示出来   
  26.         }   
  27. } else {   
  28.                 //2.3 没有任何汽车类型的数据   
  29.                 cartypeSelect.parent().hide();   
  30.                 carnameSelect.next().hide();   
  31.             }   
  32.             carnameSelect.data(carnameValue, data);   
  33. }, ”json”)   
  34.         } else {   
  35.             var data = cartypeSelect.data(carnameValue);   
  36.             if(data.length != 0) {   
  37.     cartypeSelect.html(“”);   
  38.     $(“<option value=’’>请选择汽车类型</option>”).appendTo(cartypeSelect);   
  39.         for(var  i = 0; i < data.length; i++) {   
  40.           $(“<option value=’” + data[i] + “’>” + data[i]  + “</option>”).appendTo(cartypeSelect);   
  41.           cartypeSelect.parent().show();  //汽车类型的下拉框显示出   
  42.           carnameSelect.next().show();   //第一个下拉框后面的指示图片显示出来   
  43.         }   
  44. } else {   
  45.                 //2.3 没有任何汽车类型的数据   
  46.                 cartypeSelect.parent().hide();   
  47.                 carnameSelect.next().hide();   
  48.             }   
  49.   
  50.         }   
  51.     } else {   
  52.     //3. 如果值为空，那么第二个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏   
  53.     cartypeSelect.parent().hide();   
  54.     carnameSelect.next().hide();   
  55.     }   
  56. });   
  57. cartypeSelect.change(function(){   
  58. //1. 需要获得当前下拉框的值   
  59.     var cartypeValue = $(this).val():   
  60. carimg.hide().attr(“src”,””);;   
  61.     //2. 如果值不为空，则将下拉框的值传送给服务器   
  62.     if(cartypeValue != “”) {   
  63.         if(!cartypeSelect.data(cartypeValue)) {   
  64.         $.post(“ChainSelect”,{keyward: cartypeValue,type: sub}, function(data){   
  65. //2.1 接收服务器返回的汽车类型   
  66.             if(data.length != 0) {   
  67. //2.2 解析汽车类型的数据，填充到车轮类型下拉框中   
  68.     carwheelSelect.html(“”);   
  69.     $(“<option value=’’>请选择车轮类型</option>”).appendTo(wheeltypeSelect);   
  70.         for(var  i = 0; i < data.length; i++) {   
  71.           $(“<option value=’” + data[i] + “’>” + data[i]  + “</option>”)   
  72. .appendTo(wheeltypeSelect);   
  73.           wheeltypeSelect.parent().show();  //车轮类型的下拉框显示出   
  74.           cartypeSelect.next().show();   //第二个下拉框后面的指示图片显示出来   
  75.         }   
  76. } else {   
  77.                 //2.3 没有任何汽车类型的数据   
  78.                 wheeltypeSelect.parent().hide();   
  79.                 cartypeSelect.next().hide();   
  80.             }   
  81.             cartypeSelect.data(cartypeValue,data);   
  82. }, ”json”)   
  83. }else {   
  84.     var data = cartypeSelect.data(cartypeValue);   
  85. if(data.length != 0) {   
  86. //2.2 解析汽车类型的数据，填充到车轮类型下拉框中   
  87.     carwheelSelect.html(“”);   
  88.     $(“<option value=’’>请选择车轮类型</option>”).appendTo(wheeltypeSelect);   
  89.         for(var  i = 0; i < data.length; i++) {   
  90.           $(“<option value=’” + data[i] + “’>” + data[i]  + “</option>”)   
  91. .appendTo(wheeltypeSelect);   
  92.           wheeltypeSelect.parent().show();  //车轮类型的下拉框显示出   
  93.           cartypeSelect.next().show();   //第二个下拉框后面的指示图片显示出来   
  94.         }   
  95. } else {   
  96.                 //2.3 没有任何汽车类型的数据   
  97.                 wheeltypeSelect.parent().hide();   
  98.                 cartypeSelect.next().hide();   
  99.             }   
  100.   
  101. }   
  102.     } else {   
  103.     //3. 如果值为空，那么第三个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏   
  104.     wheeltypeSelect.parent().hide();   
  105.     cartypeSelect.next().hide();   
  106.     }   
  107. });   
  108.   
  109. wheeltypeSelect.change(function(){   
  110.     //1. 获取车轮类型   
  111.     var wheeltypeValue = $(this).val();   
  112.     //2. 根据汽车厂商名称，汽车类型和车轮类型的到汽车图片的文件名   
  113.     var carnameValue = carnameSelect.val();   
  114.     var cartypeValue = cartypeSelect.val();   
  115.     var carimgname = carnameValue + “_” + cartypeValue + “_” + wheeltypeValue + “.jpg”;   
  116.     carimg.hide();   
  117. $(“.carloading”).show(); //显示loading的图片   
  118.     //通过javascript中的Image对象预装载图片   
  119.     var cacheimg = new Image();   
  120.     $(cacheimg).attr(“src”,”images/” + carimgname).load(function(){   
  121.         $(“.carloading”).hide(); //隐藏loading图片   
  122.         carimg.attr(“src”,”images/” + carimgname).show();   
  123. });   
  124. //3. 修改汽车图片节点的src的值，让汽车图片显示   
  125.     //carimg.attr(“src”,”images/” + carimgname).show();   
  126. });   
  127.   
  128. //给数据装载中的节点定义ajax事件，实现动画提示效果   
  129. $(“.loading”).ajaxStart(function(){   
  130.     $(this).css(“visibility”,”visible”);   
  131. $(this).animate({   
  132.         opacity: 0;   
  133. },0);   
  134. }).ajaxStop(function(){   
  135.     //$(this).fadeOut(500);   
  136.     $(this).animate({   
  137.         opacity: 0;   
  138. },500);   
  139. });   
  140. });  
  • 1
  • 2
  • 下一页

相关内容