在多选bootstrap dropdown jquery中选择2个下拉列表的基础上,在列表中添加/删除元素,可以通过以下步骤实现:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉列表1
</button>
<div class="dropdown-menu" aria-labelledby="dropdown1">
<a class="dropdown-item" href="#">选项1</a>
<a class="dropdown-item" href="#">选项2</a>
<a class="dropdown-item" href="#">选项3</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉列表2
</button>
<div class="dropdown-menu" aria-labelledby="dropdown2">
<a class="dropdown-item" href="#">选项A</a>
<a class="dropdown-item" href="#">选项B</a>
<a class="dropdown-item" href="#">选项C</a>
</div>
</div>
var selectedOptions = [];
$('.dropdown-item').on('click', function() {
var optionText = $(this).text();
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
selectedOptions = selectedOptions.filter(function(option) {
return option !== optionText;
});
} else {
$(this).addClass('selected');
selectedOptions.push(optionText);
}
});
<button id="addButton" class="btn btn-primary">添加选中的元素</button>
<button id="removeButton" class="btn btn-danger">删除选中的元素</button>
$('#addButton').on('click', function() {
// 将选中的元素添加到另一个下拉列表中
var selectedItems = $('.dropdown-item.selected').clone();
$('#dropdown2 .dropdown-menu').append(selectedItems);
});
$('#removeButton').on('click', function() {
// 从第二个下拉列表中删除选中的元素
$('.dropdown-item.selected').remove();
});
通过以上步骤,你可以在多选bootstrap dropdown jquery中选择2个下拉列表的基础上,在列表中添加/删除元素。请注意,以上代码仅为示例,你可以根据实际需求进行修改和优化。
关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,建议你参考腾讯云的官方文档和产品介绍页面,以获取相关信息。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云