本文采用 TP5.0 框架
html:
<div class="layui-form-item"> <div class="layui-form-label">地址</div> <div class="layui-input-inline" style="width: 200px;"> <select name="province" id="province" lay-filter="province"> <option value="0">请选择省</option> {volist name="region_province" id="cate"} <option value="{$cate.regionNo}">{$cate.regionName}</option> {/volist} </select> </div> <div class="layui-input-inline" style="width: 200px;"> <select name="city" id="city" lay-filter="city"> <option value="0">请选择市</option> </select> </div> <div class="layui-input-inline" style="width: 200px;"> <select name="area" id="area" lay-filter="area"> <option value="0">请选择县</option> </select> </div> </div>
js:
layui.use(['form','upload'], function(){ var form = layui.form;//三级联动市 form.on('select(province)',function(data){ console.log(data); $.ajax({ type: "POST", url: "{:url('city_data')}", // data: data.field, data: {id:data.value}, dataType: "json", success: function(msg){ console.log(msg) var optionstring = ""; $('#city').html('<option value="0">请选择市</option>'); $('#area').html('<option value="0">请选择县</option>'); $.each(msg,function(i,item){ optionstring +="<option value="+item.regionNo+" >" + item.regionName + "</option>"; }) $('#city').html('<option value="0">请选择市</option>'+optionstring); form.render('select'); } }); }) //三级联动县 form.on('select(city)',function(data){ console.log(data); $.ajax({ type: "POST", url: "{:url('area_data')}", // data: data.field, data: {id:data.value}, dataType: "json", success: function(msg){ console.log(msg) var optionstring = ""; $.each(msg,function(i,item){ optionstring +="<option value="+item.regionNo+" >" + item.regionName + "</option>"; }) $('#area').html('<option value="0">请选择县</option>'+optionstring); form.render('select'); } }); })获取val值 var province = $('#province').val(); var city = $('#city').val(); var area = $('#area').val();
控制器
public function region(){ $region_province = Db('region')->where(['parentNo'=>['=',0]])->select(); $this->assign('region_province',$region_province); return $this->fetch(); }
分享学习过程
--------------------
还是有些bug的 省市区都会有数据,所以 可以加一些 if判断去限制查询的展示。
希望大佬们可以提一些意见。