как показать отмененный выбор из выпадающего списка в другом доступном выпадающем списке этой строки в таблице - JQuery

Question

У меня есть HTML-таблица, в которой есть поля ввода текста и выпадающий список в виде столбцов.У меня есть два столбца раскрывающегося списка, в которых отображается один и тот же список параметров.

Я пытаюсь удалить параметр, выбранный в одном раскрывающемся списке, и не отображается в другом раскрывающемся списке в той же строке,работает, когда я выбираю опцию из выпадающего списка Select Product1.

Проблемы, с которыми я сталкиваюсь - это когда пользователь впервые выбирает параметр из выпадающего списка столбцов Select Product2, он не удаляет параметр из списка столбцов Select Product1 для этой строки.

Другой проблемой является , если пользователь выбрал один вариант в раскрывающемся списке, этот параметр удаляется в другом раскрывающемся списке, если пользователь изменяет выбранный параметр из первого раскрывающегося списка, должен отображаться удаленный элемент./ доступно в другом раскрывающемся списке, но не отображает первый выбранный параметр, поскольку он уже удален из списка.

Любые входные данные по этим двум вопросам могут быть полезными, я попытался найти решение, но нетудачи.

Пример демонстрационной ссылки

Код:

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

Лучше отключить опцию, чем удалить ее из пользовательского интерфейса.попробуйте изменить

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

});

на

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

ДЕМО ЗДЕСЬ

надеюсь, это поможет.

Answer 2

Каждый параметр в раскрывающемся списке должен иметь уникальный идентификатор.Когда вы выбираете опцию «дом» из выпадающего меню «menu1», затем удаляете / скрываете ту же опцию (опцию с тем же идентификатором) из «menu2».Еще один способ сделать это - каждая опция имеет onClick, которая будет вызывать какую-то функцию.Пример:

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

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