如何解决如何在多选引导下拉jquery中选择2个下拉列表的基础上添加/删除列表中的元素?
希望大家一切都好,一切顺利。
我正在使用多选引导下拉jquery。我正在使用asp.net核心填充列表框,它可以很好地进行选择,全选等等。
但是我希望当我从"stub0"
中选择元素时,必须从Dropdown A
中删除该元素,并且如果我从下拉列表A中取消选择元素,则必须在dropdownB中添加/显示它。同样,如果从下拉列表B中选择了元素,则从dropdownA中删除了该元素;如果从dropdownA中选择了全部,则还将所有元素从dropdownB中删除了。
希望你能理解你们。
例如:如果dropdownlistA中的A,B,C,D值并且如果我选择A,则它必须被禁用或从dropdownB隐藏,如果我选择全部,则必须从dropdownB中删除所有内容,并且也将dropdownB删除好,
dropdown B
查看
Note: DropdownA and DropdownB both have same number of values/elements,same text,same value,
解决方法
这是一个工作示例,如下所示:
@model Players
<form class="column" asp-controller="group" asp-action="createresult" style="height:100%;" method="post">
<div id="A">
<span class="column" style="height:50px;">
@Html.ListBoxFor(x => x.AvailablePlayers,Model.AvailablePlayers,new { id = "PlayersTeamA",multiple = "multiple" })
</span>
</div>
<div id="B">
<span class="column">
@Html.ListBoxFor(x => x.AvailablePlayers,new { id = "PlayersTeamB",multiple = "multiple" })
</span>
</div>
</form>
@section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"/>
<script>
$(function () {
$('#PlayersTeamA').multiselect({
includeSelectAllOption: true
});
$('#PlayersTeamB').multiselect({
includeSelectAllOption: true
});
});
var data = [];
$('#B option').each(function (index,item) {
data.push({ label: this.label,value: this.value });
});
$("#PlayersTeamA").change(function () {
var selectedText = $('#PlayersTeamA').val();
var newData = data;
selectedText.forEach(function (element,index,array) {
newData = newData.filter(function (el) { return el.value != element; });
});
$("#PlayersTeamB").multiselect('dataprovider',newData);
});
</script>
}
我的测试模型:
public class Players
{
public SelectList AvailablePlayers { get; set; }
}
public class AvailablePlayer
{
public int Id { get; set; }
public string Name { get; set; }
}
我的测试控制器:
[HttpGet]
public async Task<IActionResult> Index()
{
var player = new List<AvailablePlayer>()
{
new AvailablePlayer(){ Id=1,Name="aa"},new AvailablePlayer(){ Id=2,Name="bb"},new AvailablePlayer(){ Id=3,Name="cc"}
};
var model = new Players()
{
AvailablePlayers = new SelectList(player,"Id","Name")
};
return View(model);
}
,
似乎您正在使用引导程序的多选。在文档中,我们可以看到您可以按以下方式配置数据(在特定输入上执行.multiselect之后,就像您在示例中一样):
var data = [
{label: "Messi",value: "Messi"},{label: "Ronaldo",value: "Ronaldo"}
];
$("#PlayersTeamA").multiselect('dataprovider',data);
现在,附加到#PlayersTeamA的'onchange'事件并更新#PlayersTeamB的可用数据,例如:
$("#PlayersTeamA").change(function () {
var selectedText = $(this).find("option:selected").text();
var newData = data.filter(function(el) { return el.value == selectedText; });
$("#PlayersTeamB").multiselect('dataprovider',newData);
});
我相信,您还必须附加#PlayersTeamB的onchange(这样它才能双向使用)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。