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

Question

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

我正在尝试删除在一个下拉菜单中选择的选项，但未显示 在同一行中的另一个下拉列表中，当我从 Select Product1 下拉列表中选择一个选项时该下拉列表正在工作。

我面临的问题是当用户第一次从Select Product2 列下拉列表中选择选项时，它不会从该行的Select Product1 列列表中删除选项。

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

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

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"; 
}

Answer 2

最好禁用一个选项而不是从用户界面中删除它。 尝试改变

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

DEMO HERE

希望这会有所帮助。