我也来分享下我自己写的城市三级选择

分享 未结 精帖
24 5089
Andy_小君
Andy_小君 2017-12-19
悬赏:20飞吻
我用的是PHP写的,代码并不是特别的好,但是很直接的实现了效果
html代码
<!DOCTYPE html>
<html>
<head>
<title>城市三级联动</title>
<meta charset="utf-8">
<?php echo getstyle(); ?>
</head>
<body>
<form class="layui-form">
<div class="layui-inline">
<select>
<option></option>
<?php
$db_sql->query("SELECT * FROM os_district WHERE level=1");
while($row=$db_sql->fetch_assoc())
{
echo "<option value='".$row['id']."'>".$row['name']."</option>";
}
?>
</select>
</div>
<div class="layui-inline">
<select id="sf"></select>
</div>
<div class="layui-inline">
<select id="qy"></select>
</div>
</form>
</body>
</html>
js代码
<script>
layui.use('form', function(){
var form = layui.form;
form.on('select', function(data){
if(data.value !=0 && data.value<37)//这里虽然是范围,一般的话不用修改,需要注意下这里不是动态的就好了,当然也可以改为动态的
{
$.ajax({
type:'POST'//提交方式
,url:'./ajax.php'//提交地址
,data:'a='+data.value//提交参数
,success:function(data)//返回的值
{
$("#sf").html(data);//添加到省份选项里面
$("#qy").empty();//由于重新选择了城市需要清空下区域选项
form.render('select');//重新渲染
var sf=$("#sf").val();//得到第二个的值
$.post("./ajax.php",{a:sf},function(data,status){$("#qy").html(data);form.render('select');});//渲染第三个选项的值
}
});
}
else if(data.value >36 && data.value<567)//这里虽然是范围,一般的话不用修改,需要注意下这里不是动态的就好了,当然也可以改为动态的
{
$.ajax({
type:'POST'//提交方式
,url:'./ajax.php'//提交地址
,data:'a='+data.value//提交参数
,success:function(data)//返回的值
{
$("#qy").html(data);//添加到区域选项里面
form.render('select');//重新渲染
}
});
}
else if(data.value ==0)//如果等于0就表示选择了第一个选项那么就要把所有选项都清空了
{

$("#sf").empty();$("#qy").empty();//清空所有选择
form.render('select');//重新渲染
}
});
});
</script>
异步请求代码
  if(isset($_POST['a']))
{
$id=$_POST['a'];
$db_sql->query("SELECT * FROM os_district WHERE upid='$id'");
while($row=$db_sql->fetch_assoc())
{
echo "<option value='".$row['id']."'>".$row['name']."</option>";//这是返回的数据,将会添加到对应的option里
}
}

演示地址: http://baolanonline.com/dis.php
数据库下载: http://baolanonline.com/os_district.sql
回帖
本帖已设置禁止回复