首先下載xm-select.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},],})})

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

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},
		],
   })
  })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

常用的方法：
// 獲取選中值, demo1.getValue();
// 設置選中值, demo1.setValue([{ name: ‘動態值’, value: 999 }])
效果圖：