[英]Remove duplicates in one list box in another JQuery
我有2個清單方塊。 leftBox具有所有可用選項,rightBox具有客戶選擇的選項。 我知道如何使用jquery從每個列表框中刪除和添加項目。 我想要的是,如果該項目已經在rightBox中,請將其從leftBox中刪除。 因此,在onclick事件上,我希望腳本運行。
這是我的看法。
<form method="post" action="@Url.Action("SaveMarkets", "Partner")">
<div class="form-group col-sm-4">
@Html.Hidden("partnerID", Model.PartnerInfo.partnerID)
@Html.ListBoxFor(x => x.Markets, Model.MarketNames, new { @class = "form-control input-sm", id = "leftBoxN", onclick = "populatePartnerName()" })
@Html.Hidden("marketName", "", new { @class = "pName" })
<button id="grantAccess" onclick="return ajaxSubmitNotificationForm(this)">Grant Access</button>
</div>
</form>
<form method="post" action="@Url.Action("RemoveMarkets", "Partner")" id="removeAccess">
@Html.Hidden("partnerID", Model.PartnerInfo.partnerID)
@Html.Hidden("partnerMarketID", "", new { @class = "marketID" })
<button id="removeAccess" onclick="return ajaxSubmitRemoveNotification(this)">Remove Access</button>
<div class="form-group col-sm-4">
@Html.ListBox("partnerMarketID", new SelectList(Model.PartnerMarketsList, "partnerMarketID", "marketName"), new { @class = "form-control input-sm", id = "rightBoxN", onclick = "getSelectedValue()" })
</div>
</form>
這是我的JS:
function loadRemoveDups() {
var found = [];
$("#rightBoxN option").each(function () {
if ($.inArray("#rightBoxN option".text, found) != -1)
$("#leftBoxN option").remove(found);
});
}
我的JS什么也沒做。 不確定如何執行此操作。 謝謝
呈現的HTML
<div class="modal fade" id="modalMarkets" tabindex="-1" role="dialog" aria-labelledby="MyModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4>Manage Partner Markets</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div role="form">
<form method="post" action="/Partner/SaveMarkets">
<div class="form-group col-sm-4">
<input id="partnerID" name="partnerID" type="hidden" value="5" />
<select class="form-control input-sm" id="leftBoxN" multiple="multiple" name="Markets" onclick="populatePartnerName()"><option value="Central Indiana">Central Indiana</option>
<option value="Charlotte">Charlotte</option>
<option value="Columbus OH">Columbus OH</option>
<option value="Raleigh-Durham">Raleigh-Durham</option>
</select>
<input class="pName" id="marketName" name="marketName" type="hidden" value="" />
<button id="grantAccess" onclick="return ajaxSubmitNotificationForm(this)">Grant Access</button>
</div>
</form>
<form method="post" action="/Partner/RemoveMarkets" id="removeAccess">
<input id="partnerID" name="partnerID" type="hidden" value="5" />
<input class="marketID" id="partnerMarketID" name="partnerMarketID" type="hidden" value="" />
<button id="removeAccess" onclick="return ajaxSubmitRemoveNotification(this)">Remove Access</button>
<div class="form-group col-sm-4">
<select class="form-control input-sm" id="rightBoxN" multiple="multiple" name="partnerMarketID" onclick="getSelectedValue()"><option value="1">Central Indiana</option>
<option value="2">Columbus OH</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
使用下面你可以刪除所有的元素leftBoxN
選擇,存在於rightBoxN
。
function loadRemoveDups() { var found = []; $("#rightBoxN option").each(function() { var op = this; $("#leftBoxN option").filter(function() { return this.text == op.text }).remove(); }); } loadRemoveDups();
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <select class="form-control input-sm" id="leftBoxN" multiple="multiple" name="Markets"> <option value="Central Indiana">Central Indiana</option> <option value="Charlotte">Charlotte</option> <option value="Columbus OH">Columbus OH</option> <option value="Raleigh-Durham">Raleigh-Durham</option> </select> <select class="form-control input-sm" id="rightBoxN" multiple="multiple" name="partnerMarketID"> <option value="1">Central Indiana</option> <option value="2">Columbus OH</option> </select>
從選擇中選擇所有選項,第二個選項中不包含任何選項(即:過濾選項),然后刪除:
$(function () { $('#btn').on('click', function(e) { var cacheEle = $('#rightBox'); $('#leftBox option').filter(function(index, element) { return cacheEle.find('option[value="' + element.value + '"]').length == 1; }).remove(); }) });
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <select id="leftBox"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <select id="rightBox"> <option value="volvo1">Volvo1</option> <option value="saab1">Saab1</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <button id="btn">Remove Duplicated</button>
這應該工作:
function loadRemoveDups() {
$("#rightBoxN option").each(function () {
var currentEle = $(this).val();
var domLeftEle = $('#leftBoxN option:contains("' + currentEle + '")');
if ($(domLeftEle).length > 0) {
$(domLeftEle).remove();
}
});
}
謝謝,Prashant
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.