ajax+dom+php+mysql实现多级联动效果

.html文件

<script language="javascript" type="text/javascript" src="ajaxUtil.js"></script>

<script language="javascript" type="text/javascript">
  var objectId="";
  //定义函数,获取数据库的省份数据
  function getArea(id,objid){
      objectId=objid;
   //定义url
   var url="ajax-area-select-server.php";
   //定义参数
   var params="id="+id;
   //调用ajax 进行交互
   get(url,params,processData);   
  }

//处理服务器端返回的数据库,并且显示
function processData(xhr){

  //alert(xhr.responseText);
  //获取省的下拉菜单的对象
  $$(objectId).innerHTML=xhr.responseText;
 
}
</script>
</head>

<body οnlοad="getArea('','sheng')">
<div style="border:#00F dashed 1px;">
<select id="sheng" οnchange="getArea(this.value,'shi')"></select> 省
<select id="shi" οnchange="getArea(this.value,'xian')" ></select> 市
<select id="xian"></select> 县

.php文件

<?php
header("Content-Type:text/html;charset=utf-8");
//包含数据库连接
include_once "../include/dbConn.php";

//获取获取客户端传来的数据
$id=$_GET['id'];
//定义sql
$sql="select id,name from area where id like '".$id."__'";
//查询
$rs=mysql_query($sql);

$opstr="<option value='0'>==请选择==</option>";
//遍历查询结果,并且拼装html代码
while($rows=mysql_fetch_assoc($rs)){
    //拼装下拉选项
   $opstr.="<option value='".$rows['id']."'>".$rows['name']."</option>";

 }
    echo $opstr;
 ?>

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值