javascript - 如何在表中该行的其他可用下拉列表中的下拉列表中显示取消选择的选项 - jquery

Question

我有一个 html 表，其中包含输入文本字段和下拉列表作为列。 我有两个下拉列表列，它们显示相同的选项列表。

我正在尝试删除在一个下拉列表中选择的选项，但未显示 在同一行中的另一个下拉列表中，当我从“选择产品1”下拉列表中选择一个选项时，该下拉列表正在工作。

我面临的问题是当用户首次从选择产品2列下拉列表中选择选项时，它不会从选择产品1中删除该选项code> 该行的列列表。

另一个问题是，如果用户在下拉列表中选择了一个选项，则该选项将在另一个下拉列表中删除，如果用户从第一个下拉列表中更改所选选项，则应显示已删除的元素/在其他下拉列表中可用，但它没有显示第一个选定的选项，因为它已从列表中删除。

关于这两个问题的任何输入都会有帮助，我试图找到解决方案，但没有运气。

Sample Demo link

代码:

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

下拉列表中的每个选项都必须有唯一的 ID。当您从下拉菜单“menu1”中选择选项“house”时，然后从“menu2”中删除/隐藏相同的选项(具有相同ID的选项)。 另一种方法是每个选项都有 onClick 来调用一些函数。 示例:

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

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