专栏首页木头编程 - moTzxxlayui 下拉列表触发事件 获取自定义属性

layui 下拉列表触发事件 获取自定义属性

由于 layui 框架的覆盖性,我们是无法使用传统 jsjQuery 的写法的,比如: $("#toSelGoodsID").change(function(){)

  • html 核心代码:
<div class="layui-input-inline">
            <select id="toSelGoodsID" lay-filter="toSelGoodsID"
                    lay-verify="required" lay-search="">
                <option title="HELLO" value="0">直接选择或搜索选择</option>
                <option title="WORLD" value="1">WORLD</option>
                <option title="SORRY" value="2">SORRY</option>
            </select>
</div>
  • js 核心代码:
    layui.use(['form'], function () {
    	//必须要初始化 form
        var form = layui.form;
		/**
         * toSelGoodsID 下拉列表触发事件
         */
        form.on('select(toSelGoodsID)', function (data) {
        	//获取当前选中下拉项的索引
            var indexGID = data.elem.selectedIndex;
            //获取当前选中下拉项的自定义属性值 title
            var goodsName = data.elem[indexGID].title;
             //获取当前选中下拉项的 value值
            var goodsID = data.value;
            var appendStr = "<input type=\"checkbox\" name=\"aGoods[]\" value=\"" + goodsID + "\" lay-skin=\"primary\"\n" +
                "                   title=\"" + goodsName + "\" checked=\"\">";
            $(".div-actGoods").append(appendStr);
            form.render();
        });
        });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 项目开发知识盲区记录

    ajax实际上是通过XMLHttpRequest来向服务器发送异步请求的,从服务器获取数据,然后使用JS来更新页面,这也就是常说的局部刷新实现方式,所以ajax...

    大忽悠爱学习
  • Layui常用功能整理

    向任意HTML元素设定class=“layui-btn”,建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的...

    大忽悠爱学习
  • 【前端系列-4】layui表格集成select选择框和switch开关

    在前文中,我们已经初步感受了layui表格使用自定义模板的基础操作。现在,在自定义模块应用的基础上,我们进一步丰富layui表格对其他组件的集成。

    云深i不知处
  • 点击菜单选项,右侧主体区新增子界面(Tab)的实现

    今天记录一下一种前端页面的效果的实现,这种效果很常见,一般用于网站后台系统的前端页面。一般后台系统会分为顶部导航栏,左边的菜单栏和右边的主体区。有一种效果是这样...

    CherishTheYouth
  • 【学习笔记】解决layui的table分页没有checkbox记忆功能!!!

    layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,非常适合界面的快速开...

    用户5224393
  • layui小问题

    解决办法:把<button></button>标签改为<input type="button">或者在<button>中添加属性 type="button"

    生南星
  • C#开发BIMFACE系列49 Web网页中加载模型与图纸的技术方案

    C#开发BIMFACE系列3 服务端API之获取应用访问凭证AccessToken

    张传宁IT讲堂
  • 学习layui分享

    (adsbygoogle =window.adsbygoogle ||[]).push({});

    猿码优创
  • thymeleaf中使用layui

    头部引入css,尾部引入js,定义两个模板(一个也可以,里面的碎片分开写,我喜欢写两个分别引入),注意th:fragment,fragment即碎片,可以在模板...

    小尘哥
  • 初始化表格

    在需要把数据库中表的数据请求到页面上,这里就需要用到初始化表格,把你所查询的字段请求到页面上,以一个表的形式呈现,如下图

    PHY_68
  • 项目开发知识盲区整理2

    把@SpringBootTest()注解改成@SpringBootTest(classes = App.class)就可以了。就像这样:

    大忽悠爱学习
  • layuiAdmin pro v1.x 【单页版】开发者文档

    </li> <li> <p><strong>dist/</strong><br> 通过 gulp 将 layuiAdmin src 目录...

    Erwin
  • Layer弹出层的一个使用

    首先先把你所需要弹出的弹出层的HTML写好,这个是必须的,在写好完HTML后就可以把这个模态框先隐藏起来,把display属性设置为none。

    PHY_68
  • ThinkPHP5 集成使用 Layui 穿梭框(transfer)控件

    泥豆芽儿 MT
  • 前端-10款web动画插件

    今天分享的这款就是基于jQuery的瀑布流图片筛选插件,我们可以点击图片分类名称,即可将对应分类下的图片以瀑布流的方式展示出来,这款插件在筛选图片上使用还是比较...

    grain先森
  • Layui常用方法

    layui中的input radio单选框监听选择触发事件: 根据给input绑定的 lay-filter 进行查找input,然后进入函数判断 ...

    二十三年蝉
  • django admin 美化

    小贝壳
  • LayUI switch 开关监听 获取属性值、更改状态

    泥豆芽儿 MT
  • Laravel 框架中对Layer的使用

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

    泥豆芽儿 MT

扫码关注云+社区

领取腾讯云代金券