当前位置:首页 > 前端 >

layui的下拉多选框实现

时间:2022-11-19 22:03:59浏览:28 转载

此次使用的xm-select插件,一款始于layui,下拉选择框的多选解决方案插件

快速上手使用:

1、首先下载xm-select.js文件,然后放到项目里

下载地址:https://toscode.gitee.com/maplemei/xm-select/tree/master/dist

2、写一个

 <div class="layui-form" >
   <div class="layui-form-item">
        <label class="layui-form-label">展示位置</label>
         <div class="layui-input-block">
           <div id="demo1" style="width: 300px"></div>
         </div>
   </div>
 </div>
JS部分:

  layui.config({
    base: '../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index', //主入口模块
    xmSelect: "xm-select"
  }).use(['index', 'element','form','xmSelect'], function () {
    var $ = layui.$
      , element = layui.element
      ,form = layui.form;
    var router = layui.router();
    var xmSelect = layui.xmSelect
    ......
    //渲染数据
    var demo1 = xmSelect.render({
		el: '#demo1',
		data: [
			{name: '水果', value: 1,selected:false},
			{name: '蔬菜', value: 2,selected:false},
			{name: '桌子', value: 3,selected:false},
			{name: '北京', value: 4,selected:false},
		],
   })
  })
常用的方法:
// 获取选中值, demo1.getValue();
// 设置选中值, demo1.setValue([{ name: ‘动态值’, value: 999 }])
效果图:


版权声明:本文为CSDN博主「唔西迪西」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_46041654/article/details/123715589



上一篇:input输入框禁止自动填充,autocomplete="off"和 autocomplete="new-password"失效
下一篇:基于layui的下拉框多选效果(下拉多选框)

发表评论

昵称:  验证码:

关于博主

博主

博主:BlueCode

职业:web程序

简介:2002年开始一直从事Web制作,网站运营,会PHP+MYSQL ASP+MSSQL,微信开发