精华内容
下载资源
问答
  • 想实现layui多选下拉框var select = $(this),title = reElem.find('.' + TITLE),input = title.find('input'),multiSelect = title.find(".multiSelect"),dl = reElem.find('dl:eq(0)'),dds = dl.find('div>...

    想实现layui多选下拉框

    var select = $(this)

    ,title = reElem.find('.' + TITLE)

    ,input = title.find('input')

    ,multiSelect = title.find(".multiSelect")

    ,dl = reElem.find('dl:eq(0)')

    ,dds = dl.find('div>dd').length==0 ? dl.find('dd') : dl.find('div>dd')

    ,index = this.selectedIndex //当前选中的索引

    ,nearElem //select 组件当前选中的附近元素,用于辅助快捷键功能

    ,omit = typeof select.attr("lay-omit") === 'undefined' // 简写为 已选择x条

    ,isMulti = typeof select.attr('multiple') && typeof select.attr('multiple') === 'string';

    that.hidePlaceholder(title,select);

    if(disabled) return;

    这个是form源码 改了一部分没有改好

    展开全文
  • 需要引用js 和css文件 <link href="~/Content/scripts/layui-formSelects/formSelects-v4...--多选下拉框HTML代码--> <div class="layui-form-item"> <div class="layui-inline"> <label cl

    需要引用的js 和css文件

    <link href="~/Content/scripts/layui-formSelects/formSelects-v4.css" rel="stylesheet" />

    留下qq,我私发

    废话不说了,直接上代码

    1.HTML代码

    <!--多选下拉框HTML代码-->
    <div class="layui-form-item">
    	<div class="layui-inline">
    		<label class="layui-form-label">单位</label>
    		<div class="layui-input-inline" style="width:500px">
    			<select name="ReceiveOrgan" xm-select="ReceiveOrgan" id="ReceiveOrgan">
    				<option value=""></option>
    			</select>
    		</div>
    	</div>
    </div>
    

    2.JS 代码

    // 初始化搜索下拉菜单  赋值和不赋值
    function GetDrop() {
    	//全局定义一次, 加载formSelects
    	layui.config({
    		base: '/Content/scripts/layui-formSelects/' //此处路径请自行处理, 可以使用绝对路径
    	}).extend({
    		formSelects: 'formSelects-v4'
    	});
    
    	// 初始化不赋值
    	layui.use('formSelects', function () {
    		formSelects = layui.formSelects;
    
    		formSelects.data('ReceiveOrgan', 'server', {
    			url: url
    		});
    	});
    	
    	// 初始化并赋值
    	layui.use('formSelects', function () {
    		formSelects = layui.formSelects;
    		var ltArr;
    		var lt = '1,2,3,4';
    		if (lt.length > 0) {
    			ltArr = lt.split(',');
    		}
    		layui.formSelects.config('ReceiveOrgan', {
    			searchUrl: url,
    			success: function (id, url, searchVal, result) {
    				formSelects.value('ReceiveOrgan', ltArr);
    			}
    		});
    	});
    }
    

    3.后台方法

    //后台方法
    public ActionResult GetDropDown()
    {
    	string sql = @"select code,name from table";
    	var list = DbHelper.SqlQueryForDataTatable(sql).ToDataList<Model>();
    	// 多选
    	var result = list.Select(t => new { name = t.name, value = t.code });
    	return Content(result.ToJson());
    }
    

     

    展开全文
  • layui的插件效果,优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,...
  • LayUI # 多选下拉框

    2019-12-21 16:53:42
    项目中使用是formSelects-v4.js,但是现在以及对此引用停止更新了。 现在提供一下学习网址:https://hnzzmsf.github.io/example/example_v4.html 目前使用是xm-select ... 讲讲我是怎么使用的下拉框吧。...

    我的项目中使用的是formSelects-v4.js,但是现在以及对此引用停止更新了。

    现在提供一下学习网址:https://hnzzmsf.github.io/example/example_v4.html

    目前使用的是xm-select

    现在提供一下学习网址:https://maplemei.gitee.io/xm-select/#/basic/model


    讲讲我是怎么使用的下拉框吧。


    1.单项选择框

    首先讲讲搜索选择框(单项选择框)

    <link rel="stylesheet" href="../Content/css/layui.css" media="all" />
    <script type="text/javascript" src="../Content/layui.js"></script>
    <label class="layui-form">测试数据:</label>
    <div class="layui-input-inline">
        <select name="interest" lay-filter="aihao" class="layui-input" lay-search="" style="width: 210px">
            <option value=""></option>
            <option value="0">写作</option>
            <option value="1" selected="">阅读</option>
            <option value="2">游戏</option>
            <option value="3">音乐</option>
            <option value="4">旅行</option>
        </select>
    </div>

    显示效果如下:

    没有起到选择框的效果。

    修改代码如下:

    <link rel="stylesheet" href="../Content/css/layui.css" media="all" />
    <script type="text/javascript" src="../Content/layui.js"></script>
    <label class="layui-form">测试数据:</label>
    <div class="layui-input-inline layui-form">
        <select name="interest" lay-filter="aihao" class="layui-input" lay-search="" style="width: 210px">
            <option value=""></option>
            <option value="0">写作</option>
            <option value="1" selected="">阅读</option>
            <option value="2">游戏</option>
            <option value="3">音乐</option>
            <option value="4">旅行</option>
        </select>
    </div>
    
    <script>
        layui.use('form', function () {
            form = layui.form;
        });
    </script>

    成功显示搜索框样式。


    2.多项选择框

    显示效果图:

    项目使用引用:

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="renderer" content="webkit" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <link rel="stylesheet" href="../css/style.css" />
        <link rel="stylesheet" href="../layui-v2.5.4/layui/css/layui.css" media="all" />
        <link href="../Content/css/formSelects-v4.css" rel="stylesheet" />
        <script src="../layui-v2.5.4/layui/layui.js" type="text/javascript"></script>
        <script src="../Content/formSelects-v4.js" type="text/javascript"></script>

    前台项目代码:

    <select name="choose1" id="choose" lay-filter="select" xm-select="select1" xm-select-type="1" runnat="server" xm-select-show-count="3">
                                        <%=list%>
                                    </select>

    我的项目使用的是C#,我在后台进行的数据绑定。

    后台项目代码:

        public StringBuilder list = new StringBuilder();//定义的公共参数
    
    //查询的数据,需要进行下拉框绑定
    
    list.Append(" <option value='" + dr["数据字段"] + "' selected>" + dr["数据字段"] + "</option>");

    基本参数

    属性名 说明 示例
    xm-select 多选核心, 标记不同的多选, 多选ID xm-select="id"
    xm-select-max 多选最多选择数量 xm-select-max="3"
    xm-select-skin 皮肤 xm-select-skin=" default | primary | normal | warm | danger "
    xm-select-search 本地搜索 & 远程搜索 xm-select-search, xm-select-search="/search", 值为空时已有条目过滤搜索, 有值时开启远程搜索
    xm-select-create 条目不存在时创建, 标记性属性 xm-select-create
    xm-select-direction 下拉方向 xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式
    xm-select-radio 单选模式 xm-select-radio, 最多只能选择一个
    xm-select-search-type 搜索框的显示位置 xm-select-search-type="title" 在下拉选title部分显示, xm-select-search-type="dl" 在选项的第二条显示
    xm-select-show-count 多选显示的label数量 xm-select-show-count="2", 超出后隐藏

     

    多选上限

    
    <select name="city" xm-select="select5" xm-select-max="3">
        <option value="">啦啦, 我是自定义的</option>
        <option value="1" disabled="disabled">北京</option>
        <option value="2" selected="selected">上海</option>
        <option value="3">广州</option>
        <option value="4" selected="selected">深圳</option>
        <option value="5">天津</option>
    </select>

     

    展开全文
  • 文档地址。...formSelects 作者提供一个例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,i...

    文档地址。。。点击传送
    项目传送地址。。。点击传送

    formSelects 的作者提供的一个例子

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <title>formSelects-v4 多选</title>
        </head>
        <body>
    
            <link rel="stylesheet" type="text/css" href="https://raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.css" />
            
            <div>
                <select name="city" xm-select="select1">
                    <option value="1" disabled="disabled">北京</option>
                    <option value="2" selected="selected">上海</option>
                    <option value="3">广州</option>
                    <option value="4" selected="selected">深圳</option>
                    <option value="5">天津</option>
                </select>
            </div>
    
    
            <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
            <script src="https://raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.min.js" type="text/javascript"
             charset="utf-8"></script>
        </body>
    </html>
    

    在这里插入图片描述
    在这里插入图片描述
    非常感谢 formSelects 的作者

    展开全文
  • 项目新增的需求,需要点击button弹出一个弹窗,主要实现多选下拉框的内容,于是弹窗就采用了layui来做,这个很容易实现了,但是接下来使用的多选下拉框插件,出现了各种各样的问题,最主要的问题是,第一次点击...
  • layui下拉框多选功能

    2021-03-31 15:54:53
    /* 下拉多选样式 需要引用*/ select[multiple]+.layui-form-select>.layui-select-title>input.layui-input { border-bottom: 0 } select[multiple]+.layui-form-select dd { padding: 0; } select...
  • formSelects-v4 layui下拉框多选方案

    千次阅读 2019-08-06 09:49:27
    formSelects-v4.js 基于Layui的多选解决方案 1、闲谈杂趣 v3传送门v3文档 其实思考了很久, 还是放弃了v3, 因为开发v3的时候很粗暴, 按照编程角度来看就是硬撸, 也怪自己实力有限, 所以反思了一下, 尝试着继续前行....
  • layui的插件效果,优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,...
  • Layui 下拉框多选 —老司机首选

    万次阅读 热门讨论 2018-04-13 18:57:15
    需要加油老司机快来看看吧!废话不都说,上车看代码! HTML 代码 div class="layui-form-item"> label class="layui-form-label">品牌分类label> div class="layui-...
  • 智慧职教mooc2020大数据基础课后答案更多相关问题[单选] 在电力发展初期,主要是控制(),保证频率和...[多选] 以下功能“系统应用”模块不可以实现是()[单选] 电子束治疗多为表浅肿瘤,一般选择深度()[问答题...
  • 1.导入必要文件 <script src="../../lib/layui-v2.5.5/layui.js" th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script> <link rel="stylesheet" href="../../lib/layui-v2.5.5/...
  • 项目需求要做一个多选下拉框 由于项目使用layui制作,所以翻遍了CSDN也没找到合适 现使用formSelects这个插件可以完成,下面是demo,同时附上对应js和css,不会搞csdn下载,对应文件版权归原作者所有 注意,...
  • 首先layui下拉框多选原本框架是不带这个功能,本来想实现这个功能打算用js原生实现,后来翻到layui第三方插件xm-select 下拉框多选数据结构 直接上源代码吧 不喜勿喷,第一次写博客,可能表达不好吧,不懂得可以...
  • 2020年智慧树数据库原理第三单元...[多选] 属于顶中线二穴之间连线为()。[单选] 与躯干和下肢相应耳穴分布在()。[问答题,简答题] 简述职业道德基本规范[单选] 渐开线圆柱齿轮齿面接触斑点分布位置应趋近...
  • Selects-v4.js 基于Layui的多选解决方案:https://hnzzmsf.github.io/example/example_v4.html jQuery下拉多选插件 下拉框复选 包括全选:http://www.freejs.net/article_biaodan_757.html ...
  • layui实现下拉框多选,取值及赋值

    万次阅读 热门讨论 2018-09-21 15:53:01
    首先需要js及css,我是直接在官网上下载 废话不多说,直接上代码 ...layui下拉框多选&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&qu
  • layui实现下拉框select多选,取值

    万次阅读 2019-07-23 15:19:18
    layui中实现下拉框select多选,取值 html form.on('select(multi)', function (data) { // 打开控制台查看效果 onsole.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中值...
  • 多选下拉框xmSelect

    2020-12-24 18:48:55
    效果图 ... <div class="layui-inline"> <div id="payedEnum" class="xm-select-demo" style="width: 100...引入xmSelect控件(使用的的layui的前端框架,项目导入xmSelect文件后配置vision 指向xmSelect地址,
  • 类似于淘宝可以多选筛选条件,同一筛选条件如果选项过多可以设置一个“更多”按钮,超过一行数据会隐藏掉,时间筛选可以进行联动(下拉框样式稍作改动)。效果如下图: 1.主图 2.时间联动 3.选中条件,下方...
  • 首先需要js及css,可以直接在layui官网上下载:https://www.layui.com/相关引用: 增加如下测试html代码:城市●北京上海天津重庆获取配置select多选相关://全局定义一次, 加载formSelectslayui.config({base: ...
  • 开始使用:最关键就是class="selectpicker"和实现多选的multiple,其他都是锦上添花。另外lay-xxx是关于集合layui框架使用,可以无视。   最后ajax请求回来数据添加到下拉框需要: $('#package
  • layui实现下拉框select多选,取值

    千次阅读 2020-04-24 10:33:33
    layui实现下拉框select多选,取值 首先需要js及css,可以直接在layui官网上下载:https://www.layui.com/ 相关引用: <link href="~/layui-v2.5.4/layui/css/layui.css" rel="stylesheet" /> <...
  • layui的formSelects多选下拉框的禁用 layui开关的禁用 layui单选框的禁用 时间选择器的禁用 富文本编辑器的禁用 以下将一一列举这些元素如何禁用 1.文本输入框的禁用 禁用之前能在输入框输入文字,禁用之后就不能在...
  • 首先需要js及css,可以直接在layui官网上下载:https://www.layui.com/相关引用:增加如下测试html代码:城市●北京上海天津重庆获取配置select多选相关://全局定义一次, 加载formSelectslayui.config({base: '...
  • 需要使用 多选下拉框 在引入<scriptsrc="./lib/xm-select.js"type="text/javascript"charset="utf-8"></script> 出现 Uncaught ReferenceError: xmSelect is not defined 更改文件引入位置,放在...
  • layui下拉列表多选

    2019-12-06 17:16:53
    layui的select多选使用 select的多选使用 xm-select链接 最近完成一个需求,需要使用到select的多选。记录一下,方便下次使用,官方实例并没有找到自己想要的效果,但是想到了以前由@热爱前端的Java程序员 大佬写的从...
  • 1、使用 <select name="city" xm-select="select1"></select> 2、基本参数 3、基本方法 4、监听 ...9、打开、关闭下拉框 10、btns 11、search 12、默认皮肤 ...

空空如也

空空如也

1 2 3
收藏数 44
精华内容 17
关键字:

layui的多选下拉框