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 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
vue 虚拟DOM的原理
Oct 03 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
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php制作文本式留言板
2015/03/18 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
用Python抢过年的火车票附源码
2015/12/07 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
Python中Selenium库使用教程详解
2020/07/23 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
Java基础类库面试题
2013/09/04 面试题
Hibernate持久层技术
2013/12/16 面试题
火锅店创业计划书范文
2014/02/02 职场文书
微笑服务标语
2014/06/24 职场文书
环保守法证明
2015/06/24 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers