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

Question

I have 2 list boxes. The leftBox has all available options the rightBox has that customers selected options. I know how to remove and add items from each listbox with jquery. What I am wanting to to is if the item is already in rightBox remove it from the leftBox. So on the onclick event I want the script to run.

This is my view.

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

Here is my JS:

function loadRemoveDups() {
    var found = [];

    $("#rightBoxN option").each(function () {
        if ($.inArray("#rightBoxN option".text, found) != -1) 
            $("#leftBoxN option").remove(found);
    });
}

My JS does nothing. Not sure how to do this. Thanks

Rendered 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

Using the following you can remove all the elements from leftBoxN select, that exist in 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> 

Answer 2

Select all the options from the slect where no one is contained in the second one (ie: filter the option) and remove:

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

Answer 3

This should work:

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

Thanks, Prashant