在多选div中获取选项的值,可以通过以下步骤实现:
以下是一个示例代码,使用jQuery来实现在多选div中获取选项的值:
// HTML结构示例
<div class="multi-select">
<div class="option" value="1">选项1</div>
<div class="option" value="2">选项2</div>
<div class="option" value="3">选项3</div>
<div class="option" value="4">选项4</div>
</div>
// JavaScript代码示例
var selectedValues = []; // 存储选中选项的值
$('.multi-select .option').each(function() {
if ($(this).hasClass('selected')) {
var value = $(this).attr('value');
selectedValues.push(value);
}
});
console.log(selectedValues); // 输出选中选项的值数组
在上述示例中,我们首先通过选择器$('.multi-select .option')
选择多选div中的所有选项元素。然后使用.each()
方法遍历每个选项元素,检查其是否有selected
类名(表示选中状态)。如果选项被选中,我们通过.attr('value')
方法获取其值,并将其添加到selectedValues
数组中。最后,我们通过console.log()
输出选中选项的值数组。
请注意,上述示例中的类名和选择器仅供参考,你可以根据实际情况进行调整。此外,如果你不使用jQuery,可以使用原生JavaScript来实现相同的功能。
背景
近期负责的管理后台,有下拉多选的业务需求
通过网上的经验搜索,发现 xm-select 是个非常不错的选择
并且,当前的后台使用的正是 layui 前端框架
所以,在此整理一下 对下拉多选功能 【xm-select 】 的使用步骤
欢迎指摘 …
▷ 使用步骤
参考使用文档,根据本人实际操作步骤,在此描述如下:
①. html 代码
此处摘取核心代码如下 (前端框架使用的是 【layui】)
领取专属 10元无门槛券
手把手带您无忧上云