Question

我有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">&times;</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>

Answer 1

使用以下内容，您可以删除leftBoxN中存在的rightBoxN选择中的所有元素。

＆＃13;

function loadRemoveDups() {
  var found = [];
  $("#rightBoxN option").each(function() {
    var op = this;
    $("#leftBoxN option").filter(function() {
      return this.text == op.text
    }).remove();
  });
}
loadRemoveDups();

＆＃13;

<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>

＆＃13;

Answer 2

从slect中选择所有选项，其中第二个中不包含任何人（即：过滤选项）并删除：

＆＃13;

$(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();
  })
});

＆＃13;

<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>

＆＃13;

Answer 3

这应该有效：

function loadRemoveDups() {       
    $("#rightBoxN option").each(function () {
        var currentEle = $(this).val();
        var domLeftEle = $('#leftBoxN option:contains("' + currentEle + '")');
        if ($(domLeftEle).length > 0) {
            $(domLeftEle).remove();
        }
    });
}

谢谢， PRASHANT

删除另一个JQuery中的一个列表框中的重复项

3 个答案: