php省市联动实现

设计模式: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"},]';



?>

实现效果:

 

转载于:https://www.cnblogs.com/yhqq512/p/7061920.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值