layui的下拉多選框實現

【Layui】layui的下拉多選框實現

廈門德仔已於 2023-03-25 19:35:02 修改12477 收藏 8

分類專欄： #Layui 文章標籤： layui javascript 前端 xm-select

版權

#Layui專欄收錄該內容

42 篇文章3 訂閱¥59.90¥99.00

訂閱專欄超級會員免費看

此次使用的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 }])
效果圖：