layui中怎么设置select项

layui中设置select项的方法:首先创建一个HTML示例文件;然后通过ajax从后台请求获得select可供选择的元素;最后通过点击dl下某个确定的dd元素实现select的选择事件即可。

layui中怎么设置select项

本教程操作环境:Windows7系统、layui1.0版,该方法适用于所有品牌电脑。

推荐:《javascript基础教程》《javascript基础教程》

1、 需求场景分析

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

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

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

  
     请选择   华南理工大学大学城   华南理工大学五山校区   中山大学珠海校区   中山大学大学城校区   

登录后复制

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

05d6b6e4b18f39bf283e1d1ee6f55bd.png

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

78781bfdc64c488f3b01bec57ae98fb.png

发现在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项的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3005373.html

(0)
上一篇 2025年3月13日 00:55:44
下一篇 2025年2月17日 22:52:16

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 通过layui给数据表格添加序号

    具体方法如下: (学习视频分享:编程视频) 1、第一种需求,只给当前页加序号 (1)给你的数据加上 templet属性 ,cols: [[    {field:’tourPlayerId’, width:80, title: ‘ID1’, …

    2025年3月13日 编程技术
    200
  • 如何解决layui表单提交俩次

    “ 槽糕layui表单会提交俩次,你遇到过吗? ” 前言 使用这个layui已经快俩年时间了,刚刚新搭xadmin的框架,于是就出现了表单会重复提交这个问题,很懊恼啊! “ 如果你想直接知道解决方案,那就直接到第三小节即可。 ” 一、起初操…

    2025年3月13日 编程技术
    200
  • layui代码修饰器不显示样式怎么解决

    导语: layui代码修饰器官方说明文档: https://www.layui.com/doc/modules/code.html (学习视频分享:编程视频) layui作为一款轻量前端框架对于我们这种非专业前端还是挺好用的。但是我在使用代…

    2025年3月13日 编程技术
    200
  • ie8 layui不兼容吗

    layui是兼容ie8的,但是不支持IE6/7;准确来说layui兼容人类正在使用的全部浏览器(IE6/7除外),可作为PC端后台系统与前台界面的速成开发方案。 本教程操作环境:Windows7系统、layui2.5.6版,Dell G3电…

    2025年3月13日 编程技术
    200
  • layui弹出层怎么使用

    layui弹出层的使用方法:首先引入jQuery1.8以上的任意版本;然后引入laery.js;最后通过“function show(){var a = layer.open({…});}”方式使用laery.open弹出层即可…

    2025年3月13日 编程技术
    200
  • layui 怎么导入Excel

    layui导入Excel的方法:首先在Github或者码云中下载layui-excel插件;然后引入jQuery和插件源代码,并通过全局变量“LAY_EXCEL”调用函数即可。 本教程操作环境:Windows7系统、layui-excel …

    2025年3月13日 编程技术
    200
  • layui 怎么引用

    layui的引用方法:首先下载layui;然后通过引入“layui.css”和“layui.js”两个文件;最后通过“layui.use()”方法完成需要使用的模块加载即可。 本教程操作环境:Windows7系统、layui2.5.6版,D…

    2025年3月13日
    200
  • layui怎么使用jquery

    layui使用jquery的方法:1、通过“layui.use(‘jquery’, function(){var $=layui.$…}”方式使用;2、通过“layui.use([‘form&…

    2025年3月13日
    200
  • layui框架怎么导出excel表格

    前言: 由于工作需要,需要使用到导出excel表格功能,后台管理使用的是layui框架。 (学习视频分享:编程入门) 看layui的官网社区论坛,很多人都说layui自带的导出功能,只能导出当前页面的数据。而且,部分的数据都是通过数据之间关…

    2025年3月13日
    200
  • 如何使用layui中的table模块中的基础参数

    导语: layui是由职业前端倾情打造,面向全层次的前后端开发者,低门槛开箱即用的前端 UI 解决方案。 layui 的 table模块是一个重头,在基础参数方面尽可能地做到友好,即:保证功能的前提而又避免过于繁杂的配置。基础参数一般出现在…

    2025年3月13日
    200

发表回复

登录后才能评论