首页 > 代码库 > 省级三级联动

省级三级联动

2024-08-20 14:58:47   222人阅读

<!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="http://www.mamicode.com/jquery-1.11.2.min.js"></script>
<script src="http://www.mamicode.com/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=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+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);

　　实现的效果图：

省级三级联动


联系
我们