精华内容
下载资源
问答
  • layui弹框下拉搜索

    万次阅读 2017-05-12 14:51:23
    function convert(obj){ ... layui.use(['form','element'], function(){ var $ = layui.jquery , form = layui.form() ,element = layui.element(); form.on('select(test)', function(data){ _sele
    
        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>


    
    
    展开全文
  • layui下拉搜索

    千次阅读 2019-01-10 10:51:30
    html部分通过给select设定属性 lay-search 来开启搜索匹配功能 ,给select父级layui-form的类名,一定要搭配使用才能显示 &lt;div class="layui-form-item" style="border-bottom:1px solid...

    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>

     

    展开全文
  • function hidetags(selector) { var tagVal = selector.getValue(); ——→ 获取选中的值 api_scangetbook.findUser({ keyword: '' }).then(function(res) { if (res.code == 0) { var obj = [];...
  • select,添加属性,lay-search <select name="category_id" lay-search>
    select,添加属性,lay-search
    <select name="category_id" lay-search></select>
    
    展开全文
  • layui下拉搜索框功能

    千次阅读 2019-10-14 17:46:17
    layui下拉框的的搜索以及选取的值的获取 首先在上级的div 加上 layui-form 在select 加上 lay-search,lay-filter="proChange",进行渲染,接着在js中进行layui操作 进行元素获取,proChange为lay-filter的值...

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

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

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

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

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

    效果演示:

     

     

     

    展开全文
  • form.render('select'); var tree = layui.tree; var treeSelect = layui.treeSelect; treeSelect.render({ // 选择器 elem: '#tree', // 异步获取下拉树需要显示的数据 data: '/listWithTree', //写...
  • layui的下拉框具有搜索功能。 给下拉框动态赋值,想要在下拉的时候选中其中的值,因为在搜素的时候可以不用再去删除其中的值了,方便用户操作。 于是想着在聚焦的时候,使其呈全选状态。如果是输入框,可以...
  • 发现一个 layui 组件tableSelect组件正好可以实现下拉框列表进行选择的功能,正好可以满足需求。  效果如下图所示: 插件下载地址 https://gitee.com/lolicode/layui_component_tableselect 使用...
  • 今天遇到一个问题,客户要求select框可以自己输入,就是在下拉列表里找不到自己想要的选项就可以自己输入,同时还要支持模糊匹配功能,百度了一下,都是讲select配合input,input覆盖在select上面,同时又不完全盖住...
  • layuilayui-form与select2下拉多选样式冲突的解决方案@TOC 去掉搜索按钮 打开控制面板f12 查看元素 可以看到搜索按钮是由after动态生成,找到这个样式文件,然后注释 清除浏览器缓存(ctrl+shift+del),刷新...
  • <select id="slpk1" data-live-search="true" lay-ignore multiple class="selectpicker" data-size="6" data-max-options="1" data-selected-text-format=...data-live-search-placeholder="搜索" data-d...
  • <div class="layui-form-item layui-inline"> <label class="layui-form-label">跟进状态</label> <div class="layui-input-inline"> <select clas...
  • div id="demo1" class="xm-select-demo"></div> <script> var demo1 = xmSelect.render({ el: '#demo1', filterable: true, data: [ {name: '水果', value: 1}, {name: '蔬菜', value: 2}, ...
  • layui下拉选择框直接在select标签添加lay-search,即可开启搜索功能 <select id="selectCategory" lay-filter="category" lay-search> 未开启搜索功能时,文本框不会显示&nbsp,如图 当开启搜索功能时,...
  • 原网址 ,tableSelect下拉表 最新的完善:主要当表格超出文档,会定位不准,改动源码部位在最后面,前面的 点搜索有问题!!! 改动及完善: 结构 &lt;link rel="stylesheet" href="../../....
  • 我想使用xm-select扩展组件实现动态添加多个带搜索功能的下拉菜单,可以实现么? 我是先获取到后台传过来的数据然后for循环插入dom,但是渲染就只能渲染出一个,我需要怎么渲染多个呢ÿ...
  • 需求:点击搜索,输入完回车后请求接口获取下拉列表数据。目前插件是多选的,但要求只能选择一个。后面进行处理。 接口部分 html部分 <div id="addteacher" class="xm-select-demo"></div> js部分 只...
  • 禁用、多选皮肤、重复选、下拉方向、显示数量、选择数、 远程搜索、动态数据、动态创建、 搜索过滤 、快捷操作、选项模板 、多级联动等。 但根据目前FormSelects官方提供的文档,并没有说明编辑时数据如何回显,于是...
  • 1、因为动态的css楼主写不出来,因此需要引入layui中的css样式:<link rel=”stylesheet” href=”${ctxStatic}/layui/css/... * 下拉搜索,多选择等 */ $.fn.selectDataFun=function (json) { selectData[$(this
  • 1、因为动态的css楼主写不出来,因此需要引入layui中的css样式:<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css">; ...//下拉列表总数据/** * 下拉搜索,多选择等 */$...
  • formSelects.zip

    2020-05-25 18:01:59
    主要用于formSelect下拉复选框所用到的材料,基于 layui 的 select 多选解决方案。支持:多选、分组、取值&赋值、选择监听、搜索、启用&禁用、多选皮肤、重复选、下拉方向、显示数量、选择数、 远程搜索、动态数据、...
  • formSelects使用

    千次阅读 2019-01-21 14:57:49
    禁用、多选皮肤、重复选、下拉方向、显示数量、选择数、 远程搜索、动态数据、动态创建、 搜索过滤 、快捷操作、选项模板 、多级联动等。 (1)使用方式、效果演示:https://fly.layui.com/extend/f...
  • [ // select下拉搜索项 0 => '禁用', 1 => '启用', ], ], 'recommend' => [ // key 为字段名称,value 为相关配置 'showType' => 'select', // 下拉框选择搜索类型 'searchType' => '...
  • [ // select下拉搜索项 0 => '禁用', 1 => '启用', ], ], 'created_at' => [ // key 为字段名称,value 为相关配置 'showType' => 'datetime', // 日期时间搜索类型 'title' => '创建时间' /...

空空如也

空空如也

1 2
收藏数 28
精华内容 11
关键字:

layuiselect下拉搜索