【Layui】layui的下拉多选框实现

厦门德仔

已于 2023-06-20 09:32:43 修改

阅读量1.9w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： #Layui 文章标签： layui javascript 前端 xm-select

于 2022-05-22 10:00:02 首次发布

原文链接：https://blog.youkuaiyun.com/weixin_46041654/article/details/123715589

#Layui 专栏收录该内容

46 篇文章 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何利用xm-select插件在layui中创建下拉多选框。首先，从指定地址下载xm-select.js文件并引入到项目中。接着，展示了一个基本的HTML结构示例，并列举了获取和设置选中值的方法。文章提供了详细的操作步骤，并附有实际效果截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此次使用的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>

  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 }])
效果图：
在这里插入图片描述

————————————————
版权声明：本文为优快云博主「唔西迪西」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_46041654/article/details/123715589