PHP thinkphp5 + layui 實(shí)現(xiàn)四級(jí)聯(lián)動(dòng)
2020-05-18
<div class="layui-form-item layui-form-pane">
<label class="layui-form-label">城市聯(lián)動(dòng)</label>
<div class="layui-input-inline" >
<select name="province" lay-verify="required" lay-search="" lay-skin="select" lay-filter="province" >
<option value="">請(qǐng)選擇省</option>
<foreach name="arealist" item="v">
<option value="{$v.id}">{$v.area_name}</option>
</foreach>
</select>
</div>
<div class="layui-input-inline" >
<select name="city" lay-verify="required" lay-search="" lay-skin="select" lay-filter="city" id="city">
<option value="">請(qǐng)選擇市/縣</option>
</select>
</div>
<div class="layui-input-inline" >
<select name="area" lay-verify="required" lay-search=""lay-skin="select" lay-filter="area" id="area">
<option value="">請(qǐng)選擇鎮(zhèn)區(qū)</option>
</select>
</div>
<div class="layui-input-inline" >
<select name="area" lay-verify="required" lay-search=""lay-skin="select" lay-filter="street" id="street">
<option value="">請(qǐng)選擇街道</option>
</select>
</div>
</div>html 部分
<script>
layui.use(['form', 'layedit', 'laydate'],
function() {
var $ = layui.jquery,
form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate;
//監(jiān)聽省份選擇
form.on('select(province)',
function(data) {
$('#city').html('<option value="">請(qǐng)選擇市/縣</option>');
$('#area').html('<option value="">請(qǐng)選擇鎮(zhèn)區(qū)</option>');
$('#street').html('<option value="">請(qǐng)選擇街道</option>');
$.ajax({
url: "{:U('Admin/getchildarea')}",
data: {
parent_id: data.value
},
type: 'POST',
dataType: 'json',
success: function(data1) {
if (data1.error == 0) {
$("#city").append(data1.option);
form.render('select'); //刷新select選擇框渲染
}
}
});
});
form.on('select(city)',
function(data) {
$('#area').html('<option value="">請(qǐng)選擇鎮(zhèn)區(qū)</option>');
$('#street').html('<option value="">請(qǐng)選擇街道</option>');
$.ajax({
url: "{:U('Admin/getchildarea')}",
data: {
parent_id: data.value
},
type: 'POST',
dataType: 'json',
success: function(data1) {
if (data1.error == 0) {
$("#area").append(data1.option);
form.render('select'); //刷新select選擇框渲染
}
}
});
});
//監(jiān)聽省份選擇
form.on('select(area)',
function(data) {
$('#street').html('<option value="">請(qǐng)選擇街道</option>');
$.ajax({
url: "{:U('Admin/getchildarea')}",
data: {
parent_id: data.value
},
type: 'POST',
dataType: 'json',
success: function(data1) {
if (data1.error == 0) {
$("#street").append(data1.option);
form.render('select'); //刷新select選擇框渲染
}
}
});
});
//監(jiān)聽提交
form.on('submit(demo1)',
function(data) {
layer.alert(JSON.stringify(data.field), {
title: '最終的提交信息'
}) return false;
});
});
</script>js部分
public function loudong() {
$ld_id= input('post.parent_id');
$where['district_id'] = $ld_id;
$area = db('表名')->field('id, name')->where($where)->select();
if ($area) {
$option = '<option value=""></option>';
foreach ($area as $key => $value) {
$option .= '<option value="'.$value['id'].'">'.$value['name'].'</option>';
}
echo json_encode(array('error' => 0, 'option' => $option));
} else {
echo json_encode(array('error' => 1));
}
}PHP部分
可以實(shí)現(xiàn)無限級(jí)分類~
