省级三级联动

Posted gaojunshan

tags:

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

<!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>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
<script src="sanjiliandong.js"></script>
</head>

<body>

<div id="sanji"></div>


</body>
</html>
$(document).ready(function(e) {
    //往id=sanji的div里面扔三个下拉
	var str = "<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>";
	
	$("#sanji").html(str);
	
	FillSheng();
	FillShi();
	FillQu();
	
	$("#sheng").change(function(){
			FillShi();
			FillQu();
		})
	$("#shi").change(function(){
			FillQu();
		})
	
});

//填充省的方法
function FillSheng()
{
	var pcode = "0001";
	
	$.ajax({
		async:false,
		url:"sanjichuli.php",
		data:{pcode:pcode},
		type:"POST",
		dataType:"TEXT",
		success: function(data){
				var hang = data.split("|");
				var str ="";
				for(var i=0;i<hang.length;i++)
				{
					lie = hang[i].split("^");
					str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
				}
				$("#sheng").html(str);
			}
		
		});
}

//填充市的方法
function FillShi()
{
	var pcode = $("#sheng").val();
	
	$.ajax({
		async:false,
		url:"sanjichuli.php",
		data:{pcode:pcode},
		type:"POST",
		dataType:"TEXT",
		success: function(data){
				var hang = data.split("|");
				var str ="";
				for(var i=0;i<hang.length;i++)
				{
					lie = hang[i].split("^");
					str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
				}
				$("#shi").html(str);
			}
		
		});
}

//填充区的方法
function FillQu()
{
	var pcode = $("#shi").val();
	
	$.ajax({
		async:false,
		url:"sanjichuli.php",
		data:{pcode:pcode},
		type:"POST",
		dataType:"TEXT",
		success: function(data){
				var hang = data.split("|");
				var str ="";
				for(var i=0;i<hang.length;i++)
				{
					lie = hang[i].split("^");
					str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
				}
				$("#qu").html(str);
			}
		
		});
}

  sanjichuli.php 页面

<?php
$pcode = $_POST["pcode"];

include("DBDA.class.php");
$db = new DBDA();

$sql = "select * from chinastates where parentareacode=‘{$pcode}‘";

echo $db->StrQuery($sql);

  实现的效果图:

以上是关于省级三级联动的主要内容,如果未能解决你的问题,请参考以下文章

省市县三级联动sql文件

ajax实现省市区三级联动(例题)

如何用jquery+ajax写省市区的三级联动?(封装和不封装两种方式)-----2017-05-14

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

用php+mysql+ajax+jquery做省市区三级联动

HTML CSS JavaScriptjs实战篇-省级联动