layui 地区三级联动 form select 渲染的实例


Posted in Javascript onSeptember 27, 2019

如下所示:

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 渲染的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
vue实现移动端省市区选择
Sep 27 #Javascript
vue实现表单录入小案例
Sep 27 #Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 #Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 #Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 #jQuery
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 #Javascript
vue实现表格过滤功能
Sep 27 #Javascript
You might like
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
window.onload追加函数使用示例
2014/03/03 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
Angular17之Angular自定义指令详解
2018/01/21 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
pandas数据处理之绘图的实现
2020/06/15 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
python中time.ctime()实例用法
2021/02/03 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
竞聘书模板
2014/03/31 职场文书
企业标语口号
2014/06/10 职场文书
品质口号大全
2014/06/17 职场文书