select下拉列表动态数据多选 使用xm-select
时间: 2023-09-05 21:12:20 浏览: 69
要实现下拉列表的多选功能,并使用 xm-select 插件进行操作,可以按照以下步骤进行:
1. 引入必要的依赖文件。在 HTML 页面中引入 jQuery 和 xm-select 的 CSS 和 JavaScript 文件。
```html
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/xm-select/2.4.1/xm-select.css">
<script src="https://cdn.bootcdn.net/ajax/libs/xm-select/2.4.1/xm-select.js"></script>
```
2. 创建一个 `<select>` 元素,并为其添加一个唯一的 id。
```html
<select id="mySelect" multiple>
<!-- 动态生成的选项将在这里插入 -->
</select>
```
3. 使用 JavaScript 动态生成选项,并初始化 xm-select 插件。
```javascript
// 获取需要插入选项的 select 元素
var selectElement = document.getElementById("mySelect");
// 定义动态生成的选项数据
var options = [
{ name: "选项1", value: "option1" },
{ name: "选项2", value: "option2" },
{ name: "选项3", value: "option3" },
// 其他选项...
];
// 动态生成选项
options.forEach(function (option) {
var optionElement = document.createElement("option");
optionElement.text = option.name;
optionElement.value = option.value;
selectElement.appendChild(optionElement);
});
// 初始化 xm-select 插件
xmSelect.render({
el: '#mySelect',
tips: '请选择选项',
});
```
通过以上步骤,就可以实现使用 xm-select 插件实现下拉列表的动态数据多选功能。请注意,上述代码只是一个简单的示例,你可以根据自己的实际需求进行相应的修改和扩展。