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 相关文章推荐
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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
PHP多例模式介绍
2013/06/24 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
详解Python的Django框架中的模版继承
2015/07/16 Python
python遍历目录的方法小结
2016/04/28 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
基于python的列表list和集合set操作
2019/11/24 Python
python excel多行合并的方法
2020/12/09 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
幼儿园辞职信
2015/05/13 职场文书
昆虫记读书笔记
2015/06/26 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang