Detaillierte Erläuterung der Schritte zum Erreichen einer dreistufigen Verknüpfung mit jquery+xml-js-Tutorial-php.cn

Detaillierte Erläuterung der Schritte zum Erreichen einer dreistufigen Verknüpfung mit jquery+xml

php中世界最好的语言

Freigeben： 2018-04-23 13:42:32

Original

1532 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte zum Realisieren der dreistufigen Verknüpfung mit jquery ausführlich erläutern sehen. Der Seitencode lautet wie folgt:

Das Rendering lautet wie folgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head> 
 <base href="<%=basePath%>"> 
 <title>My JSP 'city.jsp' starting page</title> 
 <meta http-equiv="pragma" content="no-cache"> 
 <meta http-equiv="cache-control" content="no-cache"> 
 <meta http-equiv="expires" content="0"> 
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
 <meta http-equiv="description" content="This is my page"> 
 <!-- 
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 --> 
 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
 <script type="text/javascript"> 
 $(document).ready(function(){ 
  //省 
  $.ajax({url:"xml/City.xml", 
   success:function(xml){ 
    $(xml).find("province").each(function(){ 
    var t = $(this).attr("name");//this-> 
    $("#DropProvince").append("<option>"+t+"</option>"); 
    }); 
   } 
  }); 
  //市 
  $("#DropProvince").change(function(){ 
   $("#sCity>option").remove(); 
   $("#sArea>option").remove(); 
   var pname = $("#DropProvince").val(); 
   $.ajax({url:"xml/City.xml", 
   success:function(xml){ 
    ///查找<province>下的所有第一级子元素(即城市) 
    $(xml).find("province[name='"+pname+"']>city").each(function(){ 
    var city = $(this).attr("name");//this-> 
    $("#sCity").append("<option>"+city+"</option>"); 
    }); 
    ///查找<city>下的所有第一级子元素(即区域) 
    var cname = $("#sCity").val(); 
    $(xml).find("city[name='"+cname+"']>area").each(function(){ 
    var area = $(this).attr("name");//this-> 
    $("#sArea").append("<option>"+area+"</option>"); 
    }); 
   } 
   }); 
  }); 
  //区 
  $("#sCity").change(function(){ 
   $("#sArea>option").remove(); 
   var cname = $("#sCity").val(); 
   $.ajax({url:"xml/City.xml", 
   success:function(xml){ 
    ///查找<city>下的所有第一级子元素(即区域) 
    $(xml).find("city[name='"+cname+"']>area").each(function(){ 
    var area = $(this).attr("name");//this-> 
    $("#sArea").append("<option>"+area+"</option>"); 
    }); 
   } 
   }); 
  }); 
 }); 
 </script> 
 </head> 
 <body> 
 <form id="form1"> 
 <p> 
 <select id="DropProvince" style="width:100px;"> 
  <option>请选择</option> 
 </select> 
 <select id="sCity" style="width:100px;"> 
  <option>请选择相应市</option> 
 </select> 
  <select id="sArea" style="width:100px;"> 
  <option>请选择相应区</option> 
 </select> 
 </p> 
 </form> 
 </body> 
</html>

Nach dem Login kopieren

Ich glaube, Sie beherrschen die Methode Nachdem Sie den Fall in diesem Artikel und mehr gelesen haben. Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

jQuery-Plug-in Tocify dynamisches Knotenimplementierungsverzeichnismenü

jQuery analysiert XML-Dateien und fügt sie dynamisch hinzu js-Dateien So implementieren Sie

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Erreichen einer dreistufigen Verknüpfung mit jquery+xml. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!