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

Question

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

我正在尝试删除在一个下拉列表中选择的选项，并且在我从“选择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

下拉菜单中的每个选项都必须具有唯一的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

禁用选项比从ui中删除选项更好。 尝试改变

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

此处演示

希望这可以帮助。