sanji.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<load href ="__PUBLIC__/JQ/jquery-1.12.4.min.js"/>
</head>
<body>
<h1>三级联动</h1>
<div id=‘sanji‘>
<select id = ‘sheng‘></select>
<select id =‘shi‘></select>
<select id = ‘xian‘></select>
</div>
</body>
</html>
<script>
$(document).ready(function(e){
sheng();
shi();
xian();
//省级列表数据
function sheng(){
$.ajax({
url:"__CONTROLLER__/sheng",
dataType:"json",
async:false, //同步
success:function(sheng){
var str =‘‘;
for(var i=0;i<sheng.length;i++)
{
str += "<option value = " + sheng[i].pro_id +">"
+ sheng[i].pro_name + "</option>";
}
$("#sheng").html(str); //填充省级列表
}
});
}
//市级列表数据
function shi(){
var id = $("#sheng").val();
$.ajax({
url:"__CONTROLLER__/shi",
data:{id:id},
dataType:"json",
async:false, //同步
type:"post",
success:function(shi){
var str = ‘‘;
for(var i=0;i<shi.length;i++)
{
str += "<option value=" + shi[i].city_id +">"
+ shi[i].city_name + "</option>";
}
$("#shi").html(str); //填充市级列表
}
});
}
function xian(){
var id = $("#shi").val();
$.ajax({
url:"__CONTROLLER__/xian",
data:{id:id},
dataType:"json",
async:false, //同步
type:"post",
success:function(xian){
var str = ‘‘;
for(var i=0;i<xian.length;i++)
{
str += "<option value=" + xian[i].cou_id +">"
+ xian[i].cou_name + "</option>";
}
$("#xian").html(str); //填充县级列表
}
});
}
$("#sheng").change(function(){
shi();
xian();
});
$("#shi").change(function(){
xian();
});
});
</script>
SanjiController.class.php
<?php
namespace Home\Controller;
use Think\Controller;
class SanjiController extends Controller{
public function sanji(){
$this->display();
}
//省级列表
public function sheng(){
$pro = M(‘pro‘);
$sheng = $pro->select();
$this->ajaxReturn($sheng);
}
//市级列表
public function shi(){
$id = I(‘id‘);
$city = M(‘city‘);
$shi = $city->where(array(‘pro_id‘=>$id))->select();
$this->ajaxReturn($shi);
}
public function xian(){
$id = I(‘id‘);
$cou = M(‘cou‘);
$xian = $cou->where(array(‘city_id‘=>$id))->select();
$this->ajaxReturn($xian);
}
}
?>
省级表 
市级表 
县级表 
注：表中数据仅作为练习所用，请不要对号入座！
时间： 2024-12-25 11:06:12