Question

我有一张桌子。每个细胞内都有很多下拉列表。列数可能会有所不同。并且每行的下拉列表内容相同。我想要的是当我从一个下拉列表中选择一个值时，必须从同一行的所有其他下拉列表中删除该值。

这是我的表

<table>
    <tbody> 
        <tr class="row">
            <td>
                <select>
                    <option value="1">Option 1 of row 1</option>
                    <option value="2">Option 2 of row 1</option>
                    <option value="3">Option 3 of row 1</option>
                </select>               
            </td>

            <td>
                <select>
                    <option value="1">Option 1 of row 1</option>
                    <option value="2">Option 2 of row 1</option>
                    <option value="3">Option 3 of row 1</option>
                </select>               
            </td>

            .....
            .....
        <tr>
        <tr class="row">
            <td>
                <select>
                    <option value="a">Option a of row 2</option>
                    <option value="b">Option b of row 2</option>
                    <option value="c">Option c of row 2</option>
                </select>               
            </td>

            <td>
                <select>
                    <option value="a">Option a of row 2</option>
                    <option value="b">Option b of row 2</option>
                    <option value="c">Option c of row 2</option>
                </select>               
            </td>

            .....
            .....
        <tr>
    </tbody>   
</table>

因此，当我选择“第1行的选项1”时，必须删除所有其他下拉列表中的选项。如何使用jquery实现这一目标？

编辑：

如果用户第二次从已选择的下拉列表中选择另一个值，则应恢复先前替换的选项

编辑2：

我想通过使用jquery id选择器如何为一行做到这一点。如何迭代所有行，即使用类选择器？下面是单行代码

$('#row_id td select').change(function(){

    var values = [];
    $('#row_id td select').each(function(){
        if(this.value.length > 0)
            values.push(this.value);
    });

    $('#row_id td select option').each(function(){   
        if($.inArray(this.value, values) > -1 && !this.selected)                
            $(this).attr("disabled","disabled");
        else
            $(this).removeAttr("disabled");
    });

});
 $('#row_id td select').change();//triggers initial change

Answer 1

你走了：

$('select').change(function() {
     $(this).closest('tr').find('select').not(this).find('option[value="'+ $(this).val() + '"]').remove();
});

工作示例：http://jsfiddle.net/lucuma/7Mxzj/

它根据value属性从其他行中删除所选选项。我不确定这是多么有用，因为可以继续选择并删除所有选项，但它会回答你的问题。

每个修改后的问题更新了答案

每个要更新的问题更新：现在根据所选项目显示和隐藏选项。 http://jsfiddle.net/lucuma/7Mxzj/2/

$('select').change(function() {
     $(this).closest('tr').find('select').find("option").show();
     $(this).closest('tr').find('select').not(this).find('option[value="'+ $(this).val() + '"]').hide();
});

Answer 2

此问题之前已涵盖了您要执行的大部分内容：Removing an item from a select box

在您的情况下，您希望从表格中的单行中的选择框中删除选项。为了编写与这些选择匹配的jQuery选择器，您需要使用表示选择框的jQuery对象，并在调用parent()方法的结果上调用parent()方法。在select上调用parent()方法的结果是一个表格单元格，在表格单元格上调用parent()方法的结果是一个表格行。

不止一种方法可以让这只猫受到伤害，但上述内容应该会帮助你开始。

Answer 3

有多种方法可以实现这一目标，具体取决于您对动态网页开发的满意程度。首先，您应为每个下拉列表指定一个不同的ID，以便您可以通过执行$('#yourdropdownID')或document.getElementById(...)来选择它们。

在<select>上，您将需要使用onClick或onChange（取决于您希望它的“外观和感觉”），这将调用一个接受所选选项的函数。例如：<select onClick='removeOption(this);'>

您需要对此函数进行编码以执行许多操作，让我们说为了参数，您已经有三个列表： 1.循环浏览三个列表。 2.在此循环内，使用开关将接收的值与其他两个选项的选项中的值进行比较。 3.将这些值与从函数接收的值进行比较，然后从选择中删除此选项。 4.刷新当前选择下拉列表，以便JQuery正确显示元素。

你可能需要测试几次以确保它运行顺利，JQuery可能有点古怪，所以一定要调试你所做的一切。

Answer 4

得到答案。你去吧

$('.row select').change(function(){

    var values = [];
    $(this).closest('tr').find('select').each(function(){
        if(this.value.length > 0)
            values.push(this.value);
    });

    $(this).closest('tr').find('select').find('option').each(function(){   
        if($.inArray(this.value, values) > -1 && !this.selected)                
            $(this).attr("disabled","disabled");
        else
            $(this).removeAttr("disabled");
    });

});
 $('.row select').change();

表中的Jquery依赖下拉列表

4 个答案: