首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >layui 下拉列表触发事件 获取自定义属性

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

作者头像
泥豆芽儿 MT
发布2019-04-01 15:09:27
5.3K0
发布2019-04-01 15:09:27
举报

由于 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();
        });
        });
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年03月30日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档