省市区三级联动插件:
主页面:为方便使用,不用写过多代码,只写一个id为sanji的div,若别的页面要用,只需写一个id为sanji的div,加载上jQuery与sanji.js文件即可
<!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="sanji.js"></script>
</head> <body>
<!--三级联动插件-->
<!--显示省、市、区的下拉列表-->
<div id="sanji"></div> </body>
</html>
在JS页面实现三级联动:
// JavaScript Document
//省、市、区三级联动
$(document).ready(function(e) {
$("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>") //填充内容
//1.填充省
FillSheng();
//Fill("0001",sheng);
//2.填充市
FillShi();
//Fill($("#sheng").val(),shi);
//3.填充区
FillQu();
//Fill($("#shi").val(),qu); //如果省选中变化的时候,去填充市和区
$("#sheng").change(function(){
//改变市
FillShi();
//Fill($("#sheng").val(),"shi");
//改变区
FillQu();
//Fill($("#shi").val(),"qu"); }) //如果市选中变化的时候,去填充区
$("#shi").change(function(){ //改变区
FillQu();
//Fill($("#shi").val(),"qu");
}) //填充省的方法
function FillSheng()
{
//找到父级代号
var pcode = "0001";
//调用AJAX
$.ajax({
async:false,
url:"ChuLi.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var str = "";
var hang = data.split("|");
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#sheng").html(str); } });
} //填充市的方法
function FillShi()
{
//找到父级代号
var pcode = $("#sheng").val();
//调用AJAX
$.ajax({
async:false,
url:"ChuLi.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){ var str = "";
var hang = data.split("|");
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#shi").html(str);
}
});
} //填充区的方法
function FillQu()
{
//找到父级代号
var pcode = $("#shi").val();
//调用AJAX
$.ajax({
async:false, //区在最后面,不同步也没问题
url:"ChuLi.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){ var str = "";
var hang = data.split("|");
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#qu").html(str); } });
}
处理页面:
<?php
//取到传过来的父级代号
$pcode = $_POST["pcode"]; //引入操作数据库
include("../DB.class.php");
$db = new DB();
//写SQL语句
$sql = "select AreaCode,AreaName,ParentAreaCode from ChinaStates where ParentAreaCode = '{$pcode}'";
//执行
echo $db->StrQuery($sql);