20180825 ajax PHP html js 实现 三级联动(省 市 区)

Posted 世界上最好的语言-PHP

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了20180825 ajax PHP html js 实现 三级联动(省 市 区)相关的知识,希望对你有一定的参考价值。

html +  js   在一个页面

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动</title>
<script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
</head>
<body>
省:<select name="" id="sheng"></select>
市:<select name="" id="shi">
	<option value="city">请选择市</option>
</select>
区:<select name="" id="qu">
	<option value="county">请选择区</option>
</select>
</body>
</html>
<script>	
	$(function(){
		//获取省的信息  方法 观察表所得  0是父级id
		ajaxFun(0,"sheng");
	})
	//调用方法
	function ajaxFun(id,type){
		$.ajax({
			url:"sanji.php",//请求的服务器地址
			data:{id:id},//发送数据
			success:function(data){  //ajax执行成功的回调
				strToArr(data,type);//执行成功的方法
			}
		});
	}
//  调用成功方法   字符串转数组 
	function strToArr(str,type){
		  var arr=str.split("^"),//一维数组  先根据这^分
			  brr=[];//用来存字符串转数组的数组
		for(var i=0;i<arr.length;i++){
			var temp=arr[i].split(",");//再根据这个,分
			brr.push(temp);//分完添加到定义好的数组里面
		}
		//往页面追加元素方法
		addHtml(brr,type);
	}
	//往页面追加元素
function addHtml(brr,type){
    var str=\'<option value="">请选择省</option>\';//刚开始定义下拉
	for(var i in brr){//遍历数组
		str += \'<option value="\'+brr[i][0]+\'">\'+brr[i][1]+\'</option>\';
	   }
	    $(\'#\'+type).html(str);//整理好的元素 添加到定义好的str
}
	//省的下拉 值改变的时候  添加事件
	$(\'#sheng\').change(function(){
	$(\'#qu\').html(\'<option value="">请选择区</option>\');//省重新选择的时候清空区 	
		var id=$(this).val(); //显示当前省的id
		ajaxFun(id,"shi");//省下拉重新选择的时候 市的值跟着变化
	})
	//市的下拉 值改变的时候  添加事件
	$(\'#shi\').change(function(){
		var id=$(this).val();//显示当前市的id
		ajaxFun(id,"qu");//市下拉重新选择的时候 区的值跟着变化
	})
</script>

  

 

 

php

<?php
//$db 是数据库的连接资源
$db=new mysqli("localhost","root","","z_0705");
!mysqli_connect_error()or die("你连的什么玩意");
$db->query("set names utf8");
//接受数据
	$id=$_GET[\'id\'];
//写sql语句  条件查询  查表 父id=0
$sql=" select id,area_name  from dt_area where area_parent_id=$id;";
//执行sql语句  返回  结果集
$res=$db->query($sql);
//把结果集转成数组
$arr=$res->fetch_all();
//返回数据  字符串
arrToStr($arr);
//二维数组转字符串
function arrToStr($a){//二维数组转字符串
	$brr=array();//存转好字符串的数组
	foreach($a  as  $v){ 
		$temp=implode(",",$v); //整合元素之间这个,隔开
		$brr[]=$temp;//分好存到这个定义好的数组里面
	}
	echo implode("^",$brr);//整合字符串之间这个^隔开
}

  

 

以上是关于20180825 ajax PHP html js 实现 三级联动(省 市 区)的主要内容,如果未能解决你的问题,请参考以下文章

php 创建 DOM 元素并使用 ajax 发送

PHP在不使用数组的情况下触发AJAX错误代码

使用 cron 作业执行 PHP AJAX 调用

使用 AJAX 和 PHP 将 MYSQL 中的数据显示到文本字段中

抖音无水印解析PHP源码

基于layui的表格异步删除,ajax的简单运用