Layui 设置select下拉框自动选中某项的方法
2018-08-14 16:11
1366 查看
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的渲染结果如何?
此处select可供选择的元素是通过ajax从后台请求获得的,需要根据动态结果决定选择哪一个。分析一下渲染结果的结构,得到dom树如下:
发现在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下拉框自动选中某项的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- select下拉框内容回显 并将对应的option设置为selected选中状态
- ext combox 下拉框不出现自动提示,自动选中的解决方法
- jQuery选择器----------jquery实现select下拉框的取值与赋值,设置选中的方法大全
- MVC dropdownlist 后端设置select属性后前端依然不能默认选中的解决方法
- jQuery select自动选中功能实现方法分析
- 使用mobile jQuery 动态给select下拉添加数据,选中项默认不显示的解决方法。
- Angular.JS中select下拉框设置value的方法
- select标签设置只读的方法(下拉框不可选但可传值)
- jQuery设置和获取select、checkbox、radio的选中值方法
- Jquery 根据value值设置下拉列表(select)默认选中项
- layui动态设置下拉框数据,根据后台数据设置选中
- jQuery设置下拉框select 默认选中第一个option
- jQuery设置下拉框select 默认选中第一个option
- jQuery选中select控件 无法设置selected的解决方法
- element-ui中的select下拉列表设置默认值方法
- jQuery设置下拉框select 默认选中option
- 【jquery】jquery 在 ie6 下无法设置 select 选中的解决方法
- 设置 select 选中值只读的两种方法
- jQuery在ie6下无法设置select选中的解决方法详解