suchen

Heim >Web-Frontend >js-Tutorial >Wie jquery XML-Dateien liest, um eine dreistufige Verknüpfung von Provinzen, Städten und Kreisen zu realisieren_jquery

Wie jquery XML-Dateien liest, um eine dreistufige Verknüpfung von Provinzen, Städten und Kreisen zu realisieren_jquery

WBOY
WBOYOriginal
2016-05-16 15:57:131247Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode des JQuery-Lesens von XML-Dateien, um eine dreistufige Verknüpfung von Provinzen, Städten und Landkreisen zu erreichen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Seitencode 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"> 
 <div> 
 <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> 
 </div> 
 </form> 
 </body> 
</html>

Die Darstellung ist wie folgt:

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Analyse des Unterschieds zwischen den Fähigkeiten window.onload und $(document).ready()_javascriptNächster Artikel：Analyse des Unterschieds zwischen den Fähigkeiten window.onload und $(document).ready()_javascript

In Verbindung stehende Artikel

Mehr sehen