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

泥豆芽儿 MT

发布于 2022-01-05 13:58:15

5.3K0

发布于 2022-01-05 13:58:15

文章被收录于专栏：木头编程 - moTzxx木头编程 - moTzxx

背景近期负责的管理后台，有下拉多选的业务需求通过网上的经验搜索，发现 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>