php省市聯動實現
阿新 • • 發佈：2017-06-22
泥鰍 ack values primary ray insert ble else node
設計模式：ajax實現，數據庫格式：id,name,parent_id
數據庫：
CREATE TABLE IF NOT EXISTS `city` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(30) DEFAULT NULL, `parent_id` int(11) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=26 ; INSERT INTO `city` (`id`, `name`, `parent_id`) VALUES(1, ‘安徽‘, 0), (2, ‘浙江‘, 0), (3, ‘亳州‘, 1), (4, ‘合肥‘, 1), (5, ‘巢湖‘, 1), (6, ‘渦陽‘, 3), (7, ‘蒙城‘, 3), (8, ‘利辛‘, 3), (9, ‘譙城‘, 3), (10, ‘杭州‘, 2), (11, ‘寧波‘, 2), (12, ‘溫州‘, 2), (13, ‘義烏‘, 2), (14, ‘嘉興‘, 2), (15, ‘巢湖‘, 4), (16, ‘阜陽‘, 1), (17, ‘界首‘, 16), (18, ‘泥鰍‘, 16), (19, ‘拱墅區‘, 10), (20, ‘江幹區‘, 10), (21, ‘臨湖鎮‘, 6), (22, ‘立德鎮‘, 5), (23, ‘標裏鎮‘, 6), (24, ‘花溝鎮‘, 6), (25, ‘義門鎮‘, 6);
HTML代碼：
<html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> <style type="text/css"> h2{ text-align:center; color:red; } .div{ width:500px; height:300px; border:1px solid gray; margin:auto; text-align:center; padding-top:30px; } .div select{ width:80px; height:25px; color:green; } </style> </head> <script type="text/javascript"> function deal(value,next){ var Next=document.getElementById(next); //刪除節點 var oP=Next.getElementsByTagName("option"); for(var i=oP.length-1;i>=1;i--){ oP[i].parentNode.removeChild(oP[i]); } //創建ajax引擎 var xmlhttp=""; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else{ xmlhttp=new ActiveXObject("Microsoft.XMLHttp"); } //判斷狀態是否滿足條件 xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ var val=xmlhttp.responseText; // alert(val); var object=eval("("+val+")"); for(var k in object){ //創建節點 var oPt=document.createElement("option"); //添加屬性和值 oPt.setAttribute(‘value‘,object[k][‘name‘]); Next.appendChild(oPt); oPt.innerHTML=object[k][‘name‘]; } } } var url="deal.php"; var data="name="+value; //打開 xmlhttp.open("post",url,true); xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//必須加上 //發送數據 xmlhttp.send(data); } window.onload=function(){ deal(null,"sheng"); } </script> <body> <h2>省市聯動AJAX實現</h2> <div class="div"> <form action="Act.php" method="post"> <!-- 省級標簽 --> <select name="sheng" id="sheng" onchange="deal(this.value,‘shi‘)"> <option>省</option> </select> <!-- 市級標簽 --> <select name="shi" id="shi" onchange="deal(this.value,‘xian‘)"> <option>市</option> </select> <!-- 縣級標簽 --> <select name="xian" id="xian" onchange="deal(this.value,‘zhen‘)"> <option>縣</option> </select> <!-- 鎮級標簽 --> <select name="zhen" id="zhen"> <option>鎮</option> </select> <input type="submit" value="提交"/> </form> </div> </body> </html>
php後臺處理：
<?php header("content-type:text/html;charset=utf-8"); $name=$_POST[‘name‘]; //連接數據庫 $conn=mysqli_connect("localhost","root",""); if(!$conn){ die("連接數據庫失敗"); } //設置字符集 mysqli_query($conn, "set names utf8"); //選擇數據庫 mysqli_select_db($conn, "city"); $sql="select id from city where name="."‘$name‘;"; $res=mysqli_query($conn, $sql); if(mysqli_num_rows($res)>0){ $row=mysqli_fetch_assoc($res); $id=$row[‘id‘]; }else{ $id=0; } $sql="select * from city where parent_id=".$id; $res=mysqli_query($conn, $sql); $arr=array(); if(mysqli_num_rows($res)>0){ while($row=mysqli_fetch_assoc($res)){ $arr[]=$row; } } foreach ($arr as $k=>$v){ @$str.=‘{"name":‘.‘"‘.$v[‘name‘].‘","parent_id":‘.‘"‘.$v[‘parent_id‘].‘","id":‘.‘"‘.$v[‘id‘].‘"},‘; } echo "[".$str."]"; // echo ‘[{"name":"安徽","parent_id":"0"},{"name":"浙江","parent_id":"0"},{"name":"吉林","parent_id":"0"},]‘; ?>
實現效果：
php省市聯動實現