Jquery ajax下拉框联动(用xml存放数据)

demo.jsp


  1. <%@ page language= "java"   import = "java.util.*"  pageEncoding= "utf-8" %>  
  2.   
  3.   
  4. jquery xml解析  
  5. "text/javascript"  src= "js/jquery-1.3.2.js" >  
  6. "text/javascript" >  
  7.     $(document).ready(  
  8.             function() {  
  9.                 $.ajax( {  
  10.                     url : "xx.xml" ,  
  11.                     success : function(xml) {  
  12.                         $(xml).find("province" ).each(function() {  
  13.                             var t = $(this ).attr( "name" ); //this->      
  14.                                 $("#DropProvince" ).append(  
  15.                                         "  + t +  "" );  
  16.                             });  
  17.                     }  
  18.                 });  
  19.                 $("#DropProvince" ).change(  
  20.                         function() {  
  21.                             $("#sCity>option" ).remove();  
  22.                             var pname = $("#DropProvince" ).val();  
  23.                             $.ajax( {  
  24.                                 url : "xx.xml" ,  
  25.                                 success : function(xml) {  
  26.                                     $(xml).find(  
  27.                                             "province[name='"  + pname  
  28.                                                     + "']>city" ).each(  
  29.                                             function() {  
  30.                                                 $("#sCity" ).append(  
  31.                                                         "   
  32.                                                                 + $(this )  
  33.                                                                         .text()  
  34.                                                                 + "" );  
  35.                                             });  
  36.                                 }  
  37.                             });  
  38.                         });  
  39.             });  
  40.   
  41.   
  42.   
  43. "form1" >  
  44.   
  45.     "DropProvince"  style= "width: 60px;" >  
  46.           
  47.       
  48.     "sCity"  style= "width: 60px;" >  
  49.       
  
  •   
  •  
  • xx.xml

  • "1.0"  encoding= "utf-8"  ?>    
  •     
  •     "湖北" >    
  •         武汉    
  •         黄石    
  •         宜昌    
  •         天门    
  •         
  •     "湖南" >    
  •         邵阳    
  •         长沙    
  •         岳阳    
  •         
  •     "广东" >    
  •         广州    
  •         深圳    
  •         
  •  
  • 你可能感兴趣的:(富客服端技术)