how to show the deselected option from the dropdown list in the other available dropdown list of that row in a table - jquery

Question

I have a html table which has input text fields and dropdown list's as columns. I have two dropdown list columns which displays the same list of options.

I'm trying to remove the option selected in one dropdown and doesn't show in the other dropdown present in the same row which is working when i select a option from Select Product1 dropdown list.

Issues I'm facing is when user first select the option from Select Product2 column dropdown list, it is not removing the option from Select Product1 column list for that row.

Another issue is , if user selected one option in the dropdown list that option is removed in the other drop down list, if user changes the selected option from first dropdown list the removed element should be shown/available in the other dropdown list but it is not showing the first selected option as it has been already removed from the list.

Any inputs on this two issues would be helpful, i tried to find the solution but no luck.

Sample Demo link

Code:

 //populate dropdown with the valu`enter code here`e function populateSelect() { var ids = [{"pid":"laptop","des":"laptop"},{"pid":"Mobile","des":"Mobile"},{"pid":"IPAD mini.","des":"IPAD mini."}, {"pid":"toys","des":"toys"},{"pid":"electronics","des":"electronics"},{"pid":"desktop","des":"desktop"},{"pid":"ipad Air","des":"ipad Air"}] var productDropdown1 = $(".product1"); var productDropdown2 = $(".product2"); $.each(ids, function(index,value) { $("<option />").text(value.des).val(value.pid).appendTo(productDropdown1); $("<option />").text(value.des).val(value.pid).appendTo(productDropdown2); }); $('select').change(function() { var $sel = $(this), val = $sel.val(); $sel.parent().siblings().find('.product2 option[value=' + val + ']').remove() }); } $(document).ready(function(){ populateSelect(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="orderTable" border="1"> <tr> <th>Or.ID</th> <th>Select Product1</th> <th>Description</th> <th>Select Product2</th> <th>Comments</th> </tr> <tr> <td><input type="text" name="orderNum" value="" id="orderNum1"></td> <td> <select class="product1" id="prod1"> <option value=""></option> </select> </td> <td> <input type="text" name="description" value=""> </td> <td> <select class="product2" id="product2"> <option value=""></option> </select> </td> <td> <input type="text" name="Comments" value=""> </td> </tr> <tr> <td><input type="text" name="orderNum" value="" id="orderNum2"></td> <td> <select class="product1" id="prod2"> <option value=""></option> </select> </td> <td> <input type="text" name="description" value=""> </td> <td> <select class="product2" > <option value=""></option> </select> </td> <td> <input type="text" name="Comments" value=""> </td> </tr> <tr> <td><input type="text" name="orderNum" value="" id="orderNum3"></td> <td> <select class="product1" id="prod3"> <option value=""></option> </select> </td> <td> <input type="text" name="description" value=""> </td> <td> <select class="product2" > <option value=""></option> </select> </td> <td> <input type="text" name="Comments" value=""> </td> </tr> <tr> <td><input type="text" name="orderNum" value="" id="orderNum4"></td> <td> <select class="product1" id="prod4"> <option value=""></option> </select> </td> <td> <input type="text" name="description" value=""> </td> <td> <select class="product2" > <option value=""></option> </select> </td> <td> <input type="text" name="Comments" value=""> </td> </tr> </table> 

Answer 1

Every option in dropdown must have unique ID. When you select option "house" from dropdown menu "menu1", then remove/hide same option(option with same ID) from "menu2". Another way to do it is that every option has onClick that will call some function. Example:

<option value="" onclick="hideOption("menu2-option1")" id="menu1-option1">Option 1</option>

<!-- JS CODE -->
function hideOption(hideOptionID)
{
    document.getElementById(hideOptionID).style.display = "none"; 
}

Answer 2

It is better to disable an option than remove it from the ui. try to change

$('select').change(function() {
        var $sel = $(this),
                val = $sel.val();
        $sel.parent().siblings().find('.product2 option[value=' + val + ']').remove()

});

To

    $('select').change(function() {    
            var $sel = $(this),
            val = $sel.val();
            //$('select').not($sel).find('option').removeAttr('disabled');
 $sel.parent().siblings().not($sel).find('option').removeAttr('disabled');
        $sel.parent().siblings().find('select option[value=' + val + ']').attr('disabled',true);
        });

DEMO HERE

hope this helps.