layui 地区三级联动 form select 渲染的实例
2019-09-27 11:19
1896 查看
如下所示:
html
<!-- 城市三级联动 --> <div class="layui-form-item"> <label class="layui-form-label require_start"><span>所在城市 :</span></label> <div class="layui-input-inline"> <select id="province" name="province" lay-filter="province"> <option id="province_init" value="0-0">请选省份</option> </select> </div> <div class="layui-input-inline"> <select id="city" name="city" lay-filter="city"> <option id="city_init" value="0-0">请选择市</option> </select> </div> </div>
js
// 初始数据 var areaData = <?php echo json_encode($cities); ?>; var $form; var form; var $; layui.use(['jquery', 'form'], function() { $ = layui.jquery; form = layui.form; $form = $('form'); loadProvince(); console.log(areaData); var pi = 0; for (var index in areaData) { if (areaData[index]['provinceCode'] == {{ $assset_auth->province or 0 }}) { var proid = {{$assset_auth->province}}; console.log(proid+'---proid') //当前是355 var province_value = areaData[index]['provinceCode']+'_'+areaData[index]['mallCityList'].length+'_'+pi; console.log(province_value+'--------province_value') //当前是 355_1_42 $("#province").find("option[value='"+province_value+"']").attr("selected", true); // 载入city loadCity(areaData[index]['mallCityList']); var ci = 0; for (var ci in areaData[index]['mallCityList']) { if (areaData[index]['mallCityList'][ci]['cityCode'] == {{ $assset_auth->city or 0 }}) { var city_value = areaData[index]['mallCityList'][ci]['cityCode']+'_0_'+ci; $("#city").find("option[value='"+city_value+"']").attr("selected", true); } ci++; } } pi++; } layui.form.render('select','boardFilter'); });
这是select 选择证件 额外赠送
<!-- 选择证件类型行内判断 --> <div class="layui-form-item"> <label class="layui-form-label"><span>证件类型 :</span></label> <div class="layui-input-inline"> <select name="card_category"> <option value="" selected>请选证件类型</option> <option value="1" {{ $param!==NULL ? ($assset_auth->card_category==1 ? 'selected' : '') : '' }}>身份证</option> <option value="2" {{ $param!==NULL ? ($assset_auth->card_category==2 ? 'selected' : '') : '' }}>军官证</option> <option value="3" {{ $param!==NULL ? ($assset_auth->card_category==3 ? 'selected' : '') : '' }}>护照</option> <option value="4" {{ $param!==NULL ? ($assset_auth->card_category==4 ? 'selected' : '') : '' }}>港澳通行证</option> <option value="5" {{ $param!==NULL ? ($assset_auth->card_category==5 ? 'selected' : '') : '' }}>台胞证</option> </select> </div> </div>
总结一句
后台PHP开发 加载数据库字段 让你默认选中 某一个城市
关键步骤在 layui.form.render(‘select','boardFilter');
以上这篇layui 地区三级联动 form select 渲染的实例就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- layui 地区三级联动 form select 渲染
- 解决使用layui的时候form表单中的select等不能渲染的问题
- 省市区三级联动实例(select居中显示)
- js操纵跨frame的三级联动select下拉选项实例介绍
- 说说layui的form中的二级联动select注意点
- js操纵跨frame的三级联动select下拉选项实例介绍
- JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
- Vue如何使用vue-area-linkage实现地址三级联动效果 很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍Vue的一款地区联动插件:vue-ar
- jQuery JSON实现无刷新三级联动实例探讨
- 中国地区三级联动菜单(纯js制作)
- 织梦联动类型地区联动三级修复以及省份-市级-地区分开+高亮
- ajax实现select三级联动效果
- js省市县三级联动效果实例
- ThinkPHP快速简单实现Ajax地区三级联动(很详细)
- Javascript语言用3个列表框(select)实现的年、月、日三级联动
- 简单易懂的jquery版三级联动select
- js实现简单的省市县三级联动效果实例
- 三级联动省市区城市地区选择器v2.1.0新版本发布
- 在数据库有地区表的情况下实现省市区三级联动
- 中国地区三级联动下拉菜单效果分析