三级联动 下拉菜单式
①sanji2.php 主页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="sanji2.js"></script>
</head>
<body>
<h1>三级联动</h1>
<div id="sanji"></div>
</body>
</html>
②sanjichuli2.php
<?php include("../DBDA.php"); $db=new DBDA(); $pcode=$_POST["code"]; $sql="select * from ChinaStates where ParentAreaCode='{$pcode}'"; echo $db->Ajaxquery($sql); ?>
③sanji2.js
$(document).ready(function(e){ //在div里面造三个下拉 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //填充数据 Fillsheng(); //填充省的数据 Fillshi(); //填充市的数据 Fillqu(); //填充区的数据 //同步异步 //同步是指在Ajax处理数据的时候，必须等到处理完才能执行下面的语句， //异步是在Ajax处理数据的时候，不用等到处理完，下面的语句就可以执行 //同步在交换信息的时候，必须等到对方确认之后再发送一条 //异步在交换信息的时候，只管向对方发送，不用管对方有没有答复 //表现在线程上，同步相当于单线程处理一个请求，异步相当于多线程同时处理多个数据 //当省的选中发生变化的时候，去改变市和区 $("#sheng").change(function(){ Fillshi(); Fillqu(); }) $("#shi").change(function(){ Fillqu(); }) //填充省的方法 function Fillsheng() { var code="0001";//省的父级代号 $.ajax({ async:false,//默认true是异步 false是同步 url:"sanjichuli2.php", data:{code:code}, type:"POST", datatype:"TEXT", success: function(data){ var hang=data.split("|"); var str=""; 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 code=$("#sheng").val();//市的父级代号 ??? $.ajax({ async:false, url:"sanjichuli2.php", data:{code:code}, type:"POST", datatype:"TEXT", success: function(data){ var hang=data.split("|"); var str=""; 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 code=$("#shi").val();//市的父级代号 ??? $.ajax({ async:false, url:"sanjichuli2.php", data:{code:code}, type:"POST", datatype:"TEXT", success: function(data){ var hang=data.split("|"); var str=""; for (var i = 0; i < hang.length; i++) { var lie=hang[i].split("^"); str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#qu").html(str); } }); } });
