风吹起如花般破碎的流年，而你的笑容摇晃摇晃，成为我命途中最美的点缀!
Php爱好者新版上线啦！
-12 11

jquery+php省市区三级连选

Category:jquery学习 View: Author:燕子

        昨天自己做了个jquery+php的省市区的三级连选，贴出来让php爱好者和爱好php学习的朋友们分享分享，由于时间匆忙，上面还有很多bug，比如默认时候没有市区，但是思路还是比较清晰，朋友们可以自己发挥主动性，提出你的意见和建议！

        

XML/HTML代码
  1. <form id="form1" name="form1" method="post" action="">  
  2.   <label>省   
  3.   <select name="did" id="did">  
  4.     <option value="1">湖北</option>  
  5.     <option value="2">四川</option>  
  6.   </select>  
  7.   　   
  8.   </label>  
  9.   <label>市   
  10.   <select name="12x" id="12x">    
  11.   <option>选择市 </option>  
  12.   </select>  
  13.    　</label>  
  14.     <label>区   
  15.   <select name="12x1" id="12x1">    
  16.   <option>请选择区 </option>  
  17.   </select>  
  18.   </label>  
  19. </form>  

 

JavaScript代码
  1. <script type="text/javascript" src="jquery.js"></script>   
  2. <script type="text/javascript">   
  3.     $(document).ready(function(){   
  4.         $("#did").change(function(){   
  5.         var obj = $(this).val();   
  6.         //alert(obj);   
  7.         $.ajax({   
  8.             url:'post.php',   
  9.             type:'get',   
  10.             data: "pid="+obj,   
  11.             dataType:'json',   
  12.             success: function(rs){   
  13.                 // alert(rs);   
  14.                    
  15.                 var x = '';   
  16.                 var t='';   
  17.                 $("#12x").empty();   
  18.                 //$("<option></option>").val("请选择城市").text("请选择城市").appendTo($("#12x"));   
  19.                 for(var i=0; i<rs.length; i++){   
  20.                     $("<option></option>").val(rs[i]['cid']).text(rs[i]['name']).appendTo($("#12x"));   
  21.                 }   
  22.             }   
  23.             });   
  24.         });   
  25.            
  26.         $("#12x").change(function(){   
  27.             var obj = $(this).val();   
  28.             //alert(obj);   
  29.             $.ajax({   
  30.                 url:'post.php',   
  31.                 type:'get',   
  32.                 data: "cid="+obj,   
  33.                 dataType:'json',   
  34.                 success: function(rs){   
  35.                     //alert(rs);   
  36.                        
  37.                     var x = '';   
  38.                     var t='';   
  39.                     $("#12x1").empty();   
  40.                     //$("<option></option>").val("请选择区").text("请选择区").appendTo($("#12x1"));   
  41.                     for(var i=0; i<rs.length; i++){   
  42.                         $("<option></option>").val(rs[i]['cid']).text(rs[i]['name']).appendTo($("#12x1"));   
  43.                     }   
  44.                 }   
  45.             });   
  46.         });   
  47.     })   
  48. </script>  

 

PHP代码
  1. <?php   
  2. /*这个本该从数据库查询的为了好测试我就随便写了*/  
  3. $hubei=array(   
  4.             '0'=>array('pid'=>1,   
  5.                        'name'=>'恩施',   
  6.                        'cid'=>1   
  7.                        ),   
  8.             '1'=>array('pid'=>1,   
  9.                        'name'=>'武汉',   
  10.                        'cid'=>2   
  11.                        )   
  12.                
  13.             );   
  14.   
  15. $sichuan=array(   
  16.                
  17.             '0'=>array('pid'=>2,   
  18.                        'name'=>'成都',   
  19.                        'cid'=>1   
  20.                        ),   
  21.             '1'=>array('pid'=>2,   
  22.                        'name'=>'宜宾',   
  23.                        'cid'=>2   
  24.                        )   
  25.                
  26.             );   
  27.   
  28. $enshi=array(   
  29.             '0'=>array('cid'=>1,   
  30.                        'name'=>'建市'  
  31.                        ),   
  32.             '1'=>array('cid'=>1,   
  33.                        'name'=>'巴东'  
  34.                        )   
  35.                
  36.             );   
  37. $wuhan=array(   
  38.        
  39.             '0'=>array('cid'=>2,   
  40.                        'name'=>'武汉1'  
  41.                        ),   
  42.             '1'=>array('cid'=>2,   
  43.                        'name'=>'武汉2'  
  44.                        )   
  45.                
  46.             );   
  47. if(isset($_GET['pid']) && $_GET['pid'] == 1){   
  48.     $result = json_encode($hubei);   
  49. }else if(isset($_GET['pid']) && $_GET['pid'] == 2){   
  50.   
  51.     $result = json_encode($sichuan);   
  52.   
  53. }else if(isset($_GET['cid']) && $_GET['cid'] == 1){   
  54.   
  55.         $result = json_encode($enshi);   
  56.   
  57. }else if(isset($_GET['cid']) && $_GET['cid'] ==2){   
  58.   
  59.         $result = json_encode($wuhan);   
  60.   
  61. }   
  62. echo $result;   
  63. ?>  

 

 

 


本文来源于php爱好者：php教程 —http://www.phplover.cn/
原文地址：http://www.phplover.cn/post/jquery_php.html

jquery   评论(0)

相关文章:

发表评论

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。