LayUI，xmSelect下拉多选

LayUI，xmSelect下拉多选

---

示例，文档地址：https://maplemei.gitee.io/xm-select/#/component/install

基础用法

HTML：

// 第一步，引入 xm-select.js
<script src="/js/xm-select.js"></script>

// 第二步，定义一个容器
<div id="xmSelectElement"></div>

JS：

// 第三步，渲染
var xmSelectObject = xmSelect.render({
	el: '#xmSelectElement', // 自定义容器元素的id
	language: 'zn', // 语言
	tips: '请选择',	// 选项提示文字
	size: 'large',	// 元素大小，可选值：large、medium、small、mini
	paging: true, // 是否分页，可选值：true、false
	pageSize: 5, // 页大小，表示一页可显示多少数据
	direction: 'down',	// 下拉方向，可选值为：auto、top、down
	filterable: true, // 是否启用搜索，可选值：true、false
	empty: '呀, 没有用户呢', // 无数据时提示
	toolbar: { // 工具条配置
		show: true, // 是否显示
		showIcon: false, // 显示图标
	},
	data: [	// 数据（JSON数组）

	]
});

JSON数据返回格式：
示例地址：https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search

{
  "code": 0,
  "msg": "success",
  "data": [
    {
      "value": "16025018233430",
      "name": "河源市",
      "selected": true,
      "disabled": false
    },
    {
      "value": "16025018233431",
      "name": "银川市",
      "selected": true,
      "disabled": true
    },
    {
      "value": "16025018233432",
      "name": "无锡市",
      "selected": false,
      "disabled": false
    },
    {
      "value": "16025018233433",
      "name": "银川市",
      "selected": true,
      "disabled": false
    },
    {
      "value": "16025018233434",
      "name": "崇左市",
      "selected": false,
      "disabled": false
    },
    {
      "value": "16025018233435",
      "name": "辽源市",
      "selected": true,
      "disabled": false
    },
    {
      "value": "16025018233436",
      "name": "舟山市",
      "selected": false,
      "disabled": true
    },
    {
      "value": "16025018233437",
      "name": "南充市",
      "selected": false,
      "disabled": false
    },
    {
      "value": "16025018233438",
      "name": "重庆市",
      "selected": true,
      "disabled": false
    },
    {
      "value": "16025018233439",
      "name": "上海市",
      "selected": true,
      "disabled": false
    }
  ]
}

获取动态数据给xmSelect赋值示例：

// xmSelect赋值数据
$.post('Ajax.ashx', { type: 'GetMeetingParticipants', getType: 'edit', mid: data.Id }, function (xmSelectData) {
    xmSelectObject.update({
    	data: xmSelectData.data, // 数据源
    	autoRow: true, // 自动换行
    });
}, 'json');

xmSelect获取选中值示例：

var xmSelectData = xmSelectObject.getValue(); // 如果没有一个选中则返回一个长度为0的空数组

xmSelect选中值格式：

[{
	"value": 1,
	"name": "测试用户_01",
	"selected": false,
	"disabled": false
}, {
	"value": 6,
	"name": "测试用户_02",
	"selected": false,
	"disabled": false
}, {
	"value": 7,
	"name": "测试用户_03",
	"selected": false,
	"disabled": false
}, {
	"value": 8,
	"name": "测试用户_04",
	"selected": false,
	"disabled": false
}, {
	"value": 9,
	"name": "测试用户_05",
	"selected": false,
	"disabled": false
}]

详细使用教程请看文档，本文只作基本使用示例。