layui 实现下拉多选功能 [xm-select]

• 背景

  近期负责的管理后台，有下拉多选的业务需求
  通过网上的经验搜索，发现 xm-select 是个非常不错的选择
  并且，当前的后台使用的正是 layui 前端框架
  所以，在此整理一下 对下拉多选功能 【xm-select 】 的使用步骤
  欢迎指摘 …

▷ 使用步骤

参考使用文档，根据本人实际操作步骤，在此描述如下：

①. html 代码

• 此处摘取核心代码如下 （前端框架使用的是 【layui】）

<div class="layui-input-inline">
	<!-- 展示下拉多选框 -->
    <div id="div-task_team" class="xm-select-demo" style="width: 600px;"></div>
</div>

<!-- 用于存储选择的数据，方便后期进行数据提交操作 -->
<input type="hidden" id="task_team_sel" name="task_team_sel" value="">

②. js 实现代码

• 建议先参考官方指导文档 —— 【xm-select 动态数据】
  js 离线文件，可直接在此链接进行下载： xm-select.js

//引入 xm-select.js 离线文件
<script src="/static/js/xm-select.js"></script>
<script>
	var task_team_arr;
	var task_id = "";

	//ajax 请求 json数据，动态赋值到下拉多选框
    $.ajax({
    
    
        type: 'get',
        url: '/task/task/getItemData',
        data: {
    
    'id': task_id},
        dataType: 'json',
        async: false,
        success: function (e) {
    
    
            task_team_arr = xmSelect.render({
    
    
                el: '#div-task_team',
                data: e.data
            });
        }
    });

function save_task() {
    
    
	//拼接存储 已选择的选项
    var str_task_team = task_team_arr.getValue('value').join(',');
    $("#task_team_sel").val(str_task_team);
    ...
    //TODO 后续可提交 拼接好的数据
}
</script>

③. json 数据及交互效果

• 注意：要求请求链接返回的是 json 格式的数据结构

每个选项，主要有三个参数 ： name、value、selected(为 true时代表被选中)

附录

• 参考链接：

【HTML xm-select 多选下拉框的使用】