function convert(obj){ 
        var _select = ''; 
        layui.use(['form','element'], function(){ 
            var $ = layui.jquery ,form =layui.form(),element = layui.element(); 
            form.on('select(test)', function(data){ 
                _select = data.value; 
            }); 
        }); 
        layer.open({ 
            type: 1 ,
            title:'兑换流量' ,
            content:$('#convert') ,
            btn: ['兑换', '点错了'] ,
            btnAlign: 'c' //按钮居中 ,
            shade: 0 //不显示遮罩 ,
            yes: function(index){ 
                $.ajax({ 
                    url: '', 
                    data: 'ap='+_select + '&id=' + obj.getAttribute('flow-id'), 
                    type: "post", 
                    dataType: "json", 
                    success: function(result) { 
                        layer.msg(result); 
                    },  
                    error: function() { 
                        layer.msg('系统繁忙'); 
                    } 
                }) 
            } 
        });
    } 



<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>

<div id="convert" style="display:none;width:300px;">
    <form class="layui-form" action="" >
        <div class="layui-form-item">
            <label class="layui-form-label">MIFI</label>
            <div class="layui-input-block">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="modules" lay-verify="required" lay-filter="test" lay-search="">
                            <option value="">搜索MAC或备注</option>
                            <foreach name="data" item="v">
                                <option value="1">1GB</option>
                            </foreach>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="action-buttons"><a class="red convert" οnclick="convert(this)" flow-id="'+full.id+'" href="javascript:;">兑换</a></div>

html部分通过给select设定属性 lay-search 来开启搜索匹配功能 ，给select父级layui-form的类名，一定要搭配使用才能显示

<div class="layui-form-item" style="border-bottom:1px solid #009688;padding: 20px 10px;">
     <div class="layui-inline layui-form" style="width:240px;margin-right: 0;">
          <select name="modules" lay-verify="required" lay-search="" id="test_user"  lay-filter="test_user" >
                  <option value="">选择或输入...</option>
          </select>
      </div>
</div>

   layui.use('form', function() {
    form = layui.form;
     //渲染下拉搜索框
	$.post('{:U("api/.../...")}',{},function(data){
		if(data.success){
			var data = data.data;
			var len = data.length;
			var sel = ''
			for(var i=0;i<len;i++){
				sel+='<option value="'+data[i].id+'" >'+data[i].nickname+'</option>'
					}
			$('#test_user').append(sel);
			form.render(); //更新全部
		}
		//监听下拉框
		form.on('select(test_user)', function(data){
		var txt = $("#test_user option:selected").text();//获取select选中的值
		$('.test_user').html(txt);
			});  
  	});
   }

注意！！！！

光写html页面不在js里面去调用，css样式就显示不出来，一定要加上js部分，如：

<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

 

select，添加属性，lay-search
<select name="category_id" lay-search></select>

layui下拉框的的搜索以及选取的值的获取



首先在上级的div 加上 layui-form 

在select 加上 lay-search,lay-filter="proChange"，进行渲染，接着在js中进行layui操作



进行元素获取，proChange为lay-filter的值， data.elem为选中的下拉框的所有值的集合，我这里获取到选取的下拉选中值的id

当下拉框被layui渲染之后，原本的onChange时间会失去效果，需要使用layui的监听时间

效果演示：