如何在表中該行的其他可用下拉列表中顯示從下拉列表中取消選擇的選項-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);
        });

此處演示

希望這可以幫助。