两种方式实现省市县三级联动（利用解析文本和json方式）

最新推荐文章于 2024-01-19 23:44:06 发布

duoduo220

最新推荐文章于 2024-01-19 23:44:06 发布

阅读量4.2k

点赞数

分类专栏：代码再现文章标签： json javascript function xmlhttprequest url ajax

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

版权

代码再现专栏收录该内容

18 篇文章 0 订阅

订阅专栏

第一种：

ajax-text-select.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>解析文本实现多级联动效果</title>

var objectId="";

function getArea(id,objid){

objectId=objid;

var url="ajax-text-select-server.php";

var params="id="+id;

get(url,params,processData);

}

function processData(xhr){

var str=xhr.responseText;

var selobj=$$(objectId);

selobj.options.length=0

//第一步，使用","拆解，确定选项个数

var optarr=str.split(";");

//每一个元素id:name

for(var i=0;i<optarr.length;i++){

//拆解的第二步，使用：进行拆分，[0]===id [i]==name

var optstr=optarr[i].split(":");

//添加到下拉菜单中

var op=new Option(optstr[1],optstr[0]);

selobj.options.add(op);

}

ajax-text-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);

//要封装的格式

$str="0:=请选择=";

while($rows=mysql_fetch_assoc($rs)){

$str.=";".$rows['id'].":".$rows['name'];

}

echo $str;

</script>

</head>

解析文本实现多级联动效果

<select id="sheng" οnchange="getArea(this.value,'shi')"></select>省

<select id="shi" οnchange="getArea(this.value,'xian')"></select>市

<select id="xian"></select>县

</div>

</body>

</html>

第二种：

Json-area.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>json实现多级联动效果</title>

var objectId="";

function getArea(id,objid){

objectId=objid;

var url="ajax-json-select-server.php";

var params="id="+id;

get(url,params,processData);

}

function processData(xhr){

var str=xhr.responseText;

var obj=eval("("+xhr.responseText+")");

var selobj=$$(objectId);

selobj.options.length=0

//第一步，使用","拆解，确定选项个数

var op1=new Option("=请选择=",0);

selobj.options.add(op1);

//每一个元素id:name

for(var i=0;i<obj.length;i++){

//添加到下拉菜单中

var op=new Option(obj[i].name,obj[i].id);

selobj.options.add(op);

}

</script>

</head>

json文本实现多级联动效果

<select id="sheng" οnchange="getArea(this.value,'shi')"></select>省

<select id="shi" οnchange="getArea(this.value,'xian')"></select>市

<select id="xian"></select>县

</div>

</body>

</html>

ajax-json-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);

//要封装的格式

while($rows=mysql_fetch_assoc($rs)){

$arr[]=$rows;

}

echo json_encode($arr);

ajaxUtil.js文件

function get(url1,params,methodName){
/*
ajax使用的基本步骤：

1、初始化ajax引擎
2、封装url（设定要请求的路径）
3、打开ajax引擎（同步方式、异步的方式；本次传输使用get还是post）
4、将要请求的信息通过引擎发送到服务器进行处理
5、监听服务器返回给ajax引擎的处理状态
6、判断是否交互完毕，如果交互完毕则取出返回的数
*/
//初始化ajax引擎
var xhr = new XMLHttpRequest();//这种方式只针对ie浏览器，并且ie6以下还有问题。
var url=url1+"?"+params+"&r="+Math.random();

//alert(url);
//打开引擎
xhr.open("get",url,true);   //readyState=1

//发送请求
xhr.send(null);   //readyState=2

//监听readyState值的改变，每次改变都会执行下面额函数
xhr.onreadystatechange=function (){

   //如果等于4，表明交互完毕，我们可以取出服务器返回的内容
   if(xhr.readyState==4){

//动态调用方法，为什么说是动态呢？方法的名称是个变量methodName
   methodName(xhr);

   }

}

}

//$$（）方法用于方便取出 id="id" 的对象
function $$(id){

return document.getElementById(id);
}

duoduo220

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
两种方式实现省市县三级联动（利用解析文本和json方式）

第一种：ajax-text-select.html解析文本实现多级联动效果 var objectId=""; function getArea(id,objid){ objectId=objid; var url="ajax-text-select-server.php"; var params
复制链接

扫一扫