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

最新推荐文章于 2021-04-14 18:13:07 发布

duoduo220

最新推荐文章于 2021-04-14 18:13:07 发布

阅读量897

点赞数

分类专栏：代码再现文章标签： mysql ajax php javascript function xhtml

本文链接：https://blog.csdn.net/wo1354691371/article/details/7313481

版权

代码再现专栏收录该内容

18 篇文章 0 订阅

订阅专栏

ajax-area-select.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax+dom+php+mysql实现多级联动效果</title>
<script language="javascript" type="text/javascript" src="../../include/ajaxUtil.js"></script>
<script language="javascript" type="text/javascript">
var objectId="";
function getArea(id,objid){
   objectId=objid;
   var url="ajax-area-select-server.php";
   var params="id="+id;
   get(url,params,processData);

}
function processData(xhr){
//$$(objectId).innerHTML=xhr.responseText;

//先获取所有的select
var sel=document.getElementsByTagName("select");
//添加option
var op=document.createElement("option");
var text=document.createTextNode("objectId");
//追加到option中
op.appendChild(text);
sel.appendChild(op);
//document.getElementById("div1").appendChild(sel);
}

</script>
</head>

<body οnlοad="getArea('','sheng')">
<div style="border:#3F0 dashed 1px;" id="div1">
<select id="sheng" οnchange="getArea(this.value,'shi')"></select>省
<select id="shi" οnchange="getArea(this.value,'xian')"></select>市
<select id="xian"></select>县
</body>
</html>
ajax-area-select-server.php

<?php
header("Content-Type:text/html;charset=utf-8");
include_once "../../include/dbConn.php";

$id=$_GET['id'];
$sql="select id,name from area where id like '".$id."__'";
$rs=mysql_query($sql);
$opstr="<option value='0'>==请选择==</option>";
while($rows=mysql_fetch_assoc($rs)){
$opstr.="<option value='".$rows['id']."'>".$rows['name']."</option>";

}
echo $opstr;
?>