歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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. });  
Copyright © Linux教程網 All Rights Reserved