Layui 设置select下拉框自动选中某项的方法


Posted in Javascript onAugust 14, 2018

1、 需求场景分析

用户需要更改某一项活动的信息,活动信息中包含需要用下拉框选择的字段A。在用户点击进行修改弹出对话框的瞬间需要填补已有的活动信息,自动选择字段A已经存在的值。

2、 Layui的select下拉框是怎么实现的

为了获得一个select标配的下拉框,我们需要在html中填写的内容如下:

<div class="layui-form-item">
 <label class="layui-form-label"><span class="color-red">* </span>发送对象:</label>
 <div class="layui-input-inline">
  <select id="edit_exam_school">
   <option value="">请选择</option>
   <option value="1">华南理工大学大学城</option>
   <option value="2">华南理工大学五山校区</option>
   <option value="3">中山大学珠海校区</option>
   <option value="4">中山大学大学城校区</option>
  </select>
 </div>
</div>

layui对以上html的渲染结果如何?

Layui 设置select下拉框自动选中某项的方法

此处select可供选择的元素是通过ajax从后台请求获得的,需要根据动态结果决定选择哪一个。分析一下渲染结果的结构,得到dom树如下:

Layui 设置select下拉框自动选中某项的方法

发现在layui-input-inline之下除了select之外又多了个layui-form-select的div。该div包含layui-select-title和dl两个孩子元素,select的选择事件可以通过点击dl下某个确定的dd元素实现。

3、 如何实现自动选择?

通过以上的分析结果可以得知,我们只要拿到自己想要选择的内容所在的dd元素并对它触发点击事件,即可实现select加载时自动选择操作。

首先需要使用lay-value来确定需要设置哪个元素自动选择

var select = 'dd[lay-value=' + data.schoolId + ']';

触发点击事件,实现自动选择

$('#edit_exam_school').siblings("div.layui-form-select").find('dl').find(select).click();

以上这篇Layui 设置select下拉框自动选中某项的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
vue升级之路之vue-router的使用教程
Aug 14 #Javascript
layui table 参数设置方法
Aug 14 #Javascript
layui 表格的属性的显示转换方法
Aug 14 #Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 #Javascript
layui实现table加载的示例代码
Aug 14 #Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 #Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 #Javascript
You might like
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python程序封装为win32服务的方法
2021/03/07 Python
总结python中pass的作用
2019/02/27 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Python with标签使用方法解析
2020/01/17 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
python中如何使用虚拟环境
2020/10/14 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
有针对性的求职自荐信
2013/11/14 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
小学新教师培训方案
2014/02/03 职场文书
酒店员工管理制度
2015/08/05 职场文书