-
背景
近期负责的管理后台,有下拉多选的业务需求
通过网上的经验搜索,发现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时代表被选中)
附录
- 参考链接: