layui的下拉搜索框

小灰灰 2022-03-28 09:37 1670阅读 1赞

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，1670人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui下拉框联动查询效果

前言之前有这么一个功能，需要设计一个联动效果来联动几个选择框，假设这里是院系-专业-班级，又或者省-市-县，又或者一级部门-二级部门等等的，一个下拉框选择联动另一个下拉

川长思鸟来/ 2023年07月25日 09:15/ 0 赞/ 31 阅读

相关 LayUI # 清空下拉框的值

//监听单选 form.on('radio(test)',function(elem){ //执行清空 $("select")

我就是我/ 2023年06月30日 01:46/ 0 赞/ 29 阅读

相关 LayUI # 多选下拉框

我的项目中使用的是formSelects-v4.js，但是现在以及对此引用停止更新了。现在提供一下学习网址：[https://hnzzmsf.github.io/examp

迈不过友情╰/ 2023年06月24日 08:10/ 0 赞/ 54 阅读

相关 Layui-TreeSelect 树形下拉框的使用

使用下载Layui-TreeSelect源码 [码云地址][Link 1] 获取核心 js 文件 treeSelect.js 文件目录 /module/t

桃扇骨/ 2022年11月26日 04:55/ 0 赞/ 1177 阅读

相关有下拉的搜索框

今天一上就做出来这么个玩意，真的伤。。。不过总算是做出来，样式勉强能看。有需要的可以参考一下代码没有提炼比较乱就是，先看下具体样式吧 ![70][] css

淡淡的烟草味﹌/ 2022年05月22日 09:35/ 0 赞/ 291 阅读

相关 layui——下拉框监听

<select name="" id="userSelect" lay-filter="userClass"> <option value="0">用户

迷南。/ 2022年05月12日 13:34/ 0 赞/ 431 阅读

相关 layui select下拉框监听值变化 layui 下拉列表的change事件

layui下拉列表的事件不能用jq的change 应该用自带的方式写。默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。

叁歲伎倆/ 2022年05月10日 02:24/ 0 赞/ 1014 阅读

相关 layui的下拉搜索框

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

小灰灰/ 2022年03月28日 09:37/ 1 赞/ 1671 阅读

相关 springBoot+layui+jquery+layui弹窗下拉框

layui 的增删改查。。。废话不多说上代码由于时间原因暂时只实现了查询的后台完整代码其他的会之后贴出来其实与查询相似有需要的可以等我贴出也可以照着查询仿写

Bertha 。/ 2022年01月07日 07:39/ 0 赞/ 474 阅读

相关 layui下拉框赋默认值

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="vie

素颜马尾好姑娘i/ 2021年09月23日 08:10/ 0 赞/ 874 阅读