2023-10-28 分类: 网站建设
<div class="layui-form-item layui-form-pane"> <label class="layui-form-label">城市联动</label> <div class="layui-input-inline" > <select name="province" lay-verify="required" lay-search="" lay-skin="select" lay-filter="province" > <option value="">请选择省</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="">请选择市/县</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="">请选择镇区</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="">请选择街道</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; //监听省份选择 form.on('select(province)', function(data) { $('#city').html('<option value="">请选择市/县</option>'); $('#area').html('<option value="">请选择镇区</option>'); $('#street').html('<option value="">请选择街道</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="">请选择镇区</option>'); $('#street').html('<option value="">请选择街道</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选择框渲染 } } }); }); //监听省份选择 form.on('select(area)', function(data) { $('#street').html('<option value="">请选择街道</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选择框渲染 } } }); }); //监听提交 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部分
可以实现无限级分类~
当前名称:pHpthinkphp5+layui实现四级联动
转载注明:/news6/291256.html
成都网站建设公司_创新互联,为您提供微信小程序、企业网站制作、网站维护、软件开发、网站制作、定制网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容