Question

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

我正在尝试删除一个下拉列表中选择的选项，但不显示在同一行中存在的其他下拉列表中，当我从“选择产品1”下拉列表中选择一个选项时，该行将起作用。

我要面对的问题是当用户首次从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);
        });

DEMO HERE

希望这会有所帮助。

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

2 个答案: