PHP 实现城市多级联动(JQuery)
2019-06-19 本文已影响37人
vins
城市多级联动的实现原理:先遍历父节点 根据父节点的ID, 找到子接点,层层递进,一直遍历到最后一层
城市联动sql地址文件地址:
链接：https://pan.baidu.com/s/1SlTMDmqv1rytWWqTE0Oxdg
提取码：ju7d
需要两个demo文件
- index.php(显示页面)
- returnAddress.php(数据库处理,返回信息)
- index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市多级联动</title>
<script src="./jquery-1.7.2.min.js"></script>
</head>
<body>
<form action="action.php" method="post">
<select id="sid">
<option value="" class="ss">--请选择--</option>
</select>
<input type="hidden" name="data">
<button type="submit">提交</button>
</form>
</body>
<script>
//第一级别获取
$.get('./returnAddress.php',{upid:0},function(result){
//禁止请选择选中
$('.ss').attr('disabled',true);
//console.log(result);
//console.log(result[0]);
//得到数据数组内容 我们要遍历得到每一个对象
for(var i = 0;i<result.length;i++){
//console.log(result[i].name);
//遍历得到option标签
var info = $('<option value="'+result[i].id+'" >'+result[i].name+'</option>');
//将得到的ootion对象添加到select对象中
$('#sid').append(info);
}
},'json');
//其他级别
$('select').live('change',function(){
//alert($(this).val());
obj = $(this);
//通过id来查找下一个级别
id = obj.val();
//清除所有其他select
obj.nextAll('select').remove();
$.getJSON('./returnAddress.php',{upid:id},function(result){
//console.log(result);
//创建一个select标签对象
var select=$('<select></select>');
//防止当前城市没有办法选择所以添加请选择option标签
var op = $('<option class="mm">--请选择--</option>');
select.append(op);
//循环将得到的数组表里面的option标签添加到select标签中
for(var i = 0;i<result.length;i++){
var info = $('<option value="'+result[i].id+'">'+result[i].name+'</option>');
//将option添加到select标签对象中
select.append(info);
}
//将select添加到当前标签后面
obj.after(select);
//把其他级别的请选择禁用
$('.mm').attr('disabled',true);
})
})
//获取选中的数据提交到操作页面
$('button').click(function(){
arr=[];
console.log($('select'));
//遍历select
$('select').each(function(){
//获取当前select被选中的option标签中的文本值
sedata = $(this).find('option:selected').html();
//获取到文本值添加到对应的数组中
arr.push(sedata);
})
//删除最后一个数组请选择
arr.pop();
//把数据直接给隐藏域的value值即可
$('input[name=data]').val(arr);
//先不让他跳转
//return false;
})
</script>
</html>
2.returnAddress.php
<?php
//准备dsn
$dsn = 'mysql:host=localhost;dbname=district;charset=utf8';
//连接数据库
try {
$pdo = new PDO($dsn,'root','root');
} catch (PDOException $e) {
echo $e->getMessage();
}
//设置错误模式
$pdo->setAttribute(3,1);
//基本操作
$sql="SELECT * FROM district WHERE upid={$_GET['upid']}";
//返回预处理
$stmt = $pdo->prepare($sql);
//执行
$stmt->execute();
//获取结果内容
//$list = $stmt->fetchAll(PDO::FETCH_ASSOC);
$list = $stmt->fetchAll(2);
//var_dump($list);
echo json_encode($list);
附上简单的效果图
简单的效果图
