recherche

Maison >interface Web >js tutoriel >Implémentation JQuery d'un exemple d'effet de liste déroulante en cascade explication_jquery

Implémentation JQuery d'un exemple d'effet de liste déroulante en cascade explication_jquery

WBOY
WBOYoriginal
2016-05-16 15:38:531149parcourir

Utilisez JQuery et sélectionnez pour réaliser le lien entre les constructeurs automobiles et les types de voitures. Le processus de référence est le suivant
. Rendu :

 

Schéma d'analyse logique :

Code HTML : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>级联下拉框效果</title> 
<link rel="stylesheet" type="text/css" href="css/chainselect.css"> 
<script language="javascript" type="text/javascript" src="js/jquery.js"></script> 
<script language="javascript" type="text/javascript" src="js/chainselect.js"></script> 
</head> 
  
<body> 
  <div class="car"> 
    <span class="carname"> 
      汽车厂商： 
      <select> 
        <option value="">请选择汽车厂商</option> 
        <option value="BMW">宝马</option> 
        <option value="Audi">奥迪</option> 
        <option value="VW">大众</option> 
      </select> 
      <img src="images/pfeil.gif" alt="Implémentation JQuery dun exemple deffet de liste déroulante en cascade explication_jquery"/> 
    </span> 
    <span class="cartype"> 
      汽车类型： 
      <select></select> 
    </span>   
  </div> 
</body> 
</html>


code css : 

.car { 
  text-align:center; 
} 
.cartype{ 
  display:none; 
}

code js : 

$(document).ready(function(){ 
  //找到下拉框 
  var carnameSelect = $(".carname").children("select"); 
  var cartypeSelect = $(".cartype").children("select"); 
   
  //给下拉框注册事件 
  carnameSelect.change(function(){ 
    var carnameValue = $(this).val(); 
    if( carnameValue != ""){ 
      //carnameValue不为空的情况接着判断 
      if(!carnameSelect.data(carnameValue)){ 
        //不在缓冲区中,需要向服务器请求 
        $.post("ChainSelect",{keyword:carnameValue,type:"top"},function(data){ 
          if (data.length != 0){ 
            //返回的数据不为空 
            cartypeSelect.html(""); 
            $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect); 
            for(var i = 0;i < data.length; i++ ){ 
              $("<option value =' " + data[i] + " '> "+ data[i] +"</option>").appendTo(cartypeSelect); 
            } 
            cartypeSelect.parent().show(); 
            carnameSelect.next().show(); 
          }else{ 
            //返回的数据为空 
            cartypeSelect.parent().hide(); 
            carnameSelect.next().hide(); 
          } 
          carnameSelect.data(carnameValue,data); 
        },"json"); 
      }else{ 
        //在缓冲区中 
        var data = carnameSelect.data(carnameValue); 
        if (data.length != 0){ 
            //返回的数据不为空 
            cartypeSelect.html(""); 
            $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect); 
            for(var i = 0;i < data.length; i++ ){ 
              $("<option value =' " + data[i] + " '> "+ data[i] +"</option>").appendTo(cartypeSelect); 
            } 
            cartypeSelect.parent().show(); 
            carnameSelect.next().show(); 
          }else{ 
            //返回的数据为空 
            cartypeSelect.parent().hide(); 
            carnameSelect.next().hide(); 
          } 
      } 
    }else{ 
      //carnameValue为空的情况，隐藏第二个下拉框 
      cartypeSelect.parent().hide(); 
      carnameSelect.next().hide(); 
    } 
  }); 
   
});

Ce qui précède est un petit exemple d'utilisation de JQuery et de sélection pour implémenter des listes déroulantes en cascade. J'espère que cela sera utile à l'apprentissage de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JS CSS implémente des compétences d'effet_javascript de menu de porte coulissante simples et pratiquesArticle suivant：JS CSS implémente des compétences d'effet_javascript de menu de porte coulissante simples et pratiques

Articles Liés

Voir plus