专栏首页木头编程 - 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 条评论
登录 后参与评论

相关文章

  • ThinkPHP5.1 实例配置 ECharts 的使用指导

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    泥豆芽儿 MT
  • layui upload上传控件动态加载后点击失效的处理

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    泥豆芽儿 MT
  • LayUI radio单选按钮监听事件实现方法

    泥豆芽儿 MT
  • 基于vue的图片裁剪插件vue-cropper ,上传图片到腾讯云存储

    〆 千寻、
  • 【技术创作101训练营】Python 上的可视化库——PyG2Plot

    G2 是蚂蚁金服开源一个基于图形语法,面向数据分析的统计图表引擎。G2Plot 是在 G2 基础上,屏蔽复杂概念的前提下,保留G2 强大图形能力,封装出业务上常...

    依旧廖凯
  • Objective-C中的hasPrefix

    Objective-C中的hasPrefix hasPrefix:方法的功能是判断创建的字符串内容是否以某个字符开始,其语法形式如下:    -(BOOL)...

    猿人谷
  • PHP上传图片到数据库并显示的实例代码

    砸漏
  • iperf网络测试工具

    iperf命令是一个网络性能测试工具,可以测试TCP和UDP带宽质量。同时也可以通过UDP测试报告网丢包率或者发包性能,是一个非常实用的工具

    用户4167306
  • (译)Kubernetes Deployment 终极指南

    要把容器化的应用部署起来?在 Kubernetes 中部署容器化应用,总要涉及到 Deployment,这里有这个对象的所有内容。

    崔秀龙
  • C++判断char*的指向

    char *a = "Peter"; char b[] = "Peter"; char *c = new char[6]; strcpy_s(c, 6, "Pe...

    magicsoar

扫码关注云+社区

领取腾讯云代金券