Layui 使用Form表单的select时无法使用change事件

Posted 2022-11-26 酸辣柠檬粉

                  <div class="layui-inline">

                    <label for="gname" class="layui-form-label" style="width:100px">游戏名称：</label>

                    <div class="layui-input-inline">

                      <select name="gname" lay-filter="gname">

                        <option value="all">请选择</option>

                      </select>

                    </div>

                  </div>

如上select要想实现点击下拉框（而不是点option触发事件）就触发change事件，去后台获取数据更新option，使用jquery的change（）事件，无法触发

$('#gname').change(function()

        console.log(111);

)

以上代码不会触发

因为layui美化select是使用input框来做的select，通过js来生成的select，所以会找不到select项，需要用到事件处理

思路如下（原文见如下链接：https://fly.layui.com/jie/30928/ 的评论处)

html
<select name="test"></select>
js部分
// 先用事件委托监听layui生成出来的select组件的点击监听
$(document).on('click', 'select[name="test"]+', function()
    // 被点击的
    var elem = $(this);
    // 原始的select节点
    var selectElem = elem.prev();
    if (!selectElem.data('status') 
        // status是自定义的一个状态，比如一开始是空的，说明需要加载，如果加载过了就设置成true避免重复加载。
        // 发ajax之前最好能有一个提示信息说正在加载
        $.ajax(
            ....,
            success: function(res)
                // 修改selectElem的状态为已完成，避免重复加载
                selectElem.data('status', true);
                // 根据数据得出option的html
                selectElem.html(optionHtml);
                // 更新渲染
                form.render('select');
                // 更新的时候我记得会把打开option给关掉，所以我估计需要在后面再次触发一次点击让它显示出option
                elem.find('.layui-select-title').click();
            
        );
    
)

实际代码： 

var flag =0;

 $(document).on('click', "select[name='gname']+", function () 

    var nums = new Array();

    $("input[type='checkbox']:checked").each(function () 

      nums.push($(this).val());

    )

 

    var data = 

      'nums': nums

    ;

    var elem = $(this).prev();//得到原始select节点

    if (nums.length > 0) 

      elem.empty();

      if(flag=0)

      $.post('findGname', data, function (res) 

        var options = '<option value="">请选择</option>';

        for (i = 0; i < res.data.length; i++) 

          options += "<option value='" + res.data[i] + "'>" + res.data[i] + "</option>";

        

        console.log(options);

        elem.append(options);

        form.render('select');

       flag=1;

      )

    

  )

 

 

不过不太明白：代码中on事件（select[name='gname']+）为什么一定要加个+号才生效？