jQuery+php+mysql,轻松实现ajax无刷新省市二级联动
用jQuery的ajax方法,结合PHP,轻松实现省市级的二级联动:
新建area.php
1 <? 2 $dbc=mysqli_connect("localhost","xxxx","xxxxxxxxxx","test") or die("can not connect to mysql ".mysqli_error()); 3 mysqli_query($dbc,"set names utf8"); 4 header("Content-Type:text/html;charset=utf-8"); 5 6 if($_REQUEST['do']=="search" && $_REQUEST['pid']){ 7 $str=""; 8 $str='<select id="down_area" name="down_area">'; 9 10 $r="select areaid,name from `china_areas` where parentid='".$_REQUEST['pid']."' order by vieworder asc;"; 11 $q=mysqli_query($dbc,$r); 12 while(list($areaid,$name)=mysqli_fetch_array($q,MYSQLI_NUM)){ 13 14 $str.='<option value="'.$areaid.'">'.$name.'</option>'; 15 16 } 17 18 $str.='</select>'; 19 20 echo $str;exit; 21 } 22 ?> 23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 24 <html xmlns="http://www.w3.org/1999/xhtml"> 25 <head> 26 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 27 <title>无刷新二级联动</title> 28 <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> 29 <script language="javascript"> 30 function down_area(obj){ 31 $.ajax({ 32 type: "POST", 33 url: "area.php", 34 data: "do=search&pid="+obj.value, 35 success: function(msg){ 36 $("#area_list").html(msg); 37 } 38 }); 39 } 40 </script> 41 <style> 42 body{font:12px Arial, "微软雅黑", sans-serif;color:#666;line-height:22px;} 43 </style> 44 </head> 45 46 <body> 47 <p style="height:250px;"> </p> 48 <div align="center"> 49 地区: 50 <select id="area" name="area" onchange="down_area(this);"> 51 <? 52 $r="select areaid,name from `china_areas` where parentid='0' order by vieworder asc;"; 53 $q=mysqli_query($dbc,$r); 54 while(list($areaid,$name)=mysqli_fetch_array($q,MYSQLI_NUM)){ 55 ?> 56 <option value="<?=$areaid;?>"><?=$name;?></option> 57 <? 58 } 59 ?> 60 </select> <span id="area_list"></span> 61 </div> 62 </body>
效果如图:
下拉选择广东省后:
