表内的Jquery依赖下拉列表

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

得到答案。给你

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

Answer 3

这个问题之前已经涵盖了您想要做的大部分事情：Removing an item from a select box

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

给这只猫剥皮的方法不止一种，但以上内容应该可以帮助您入门。

Answer 4

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

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

你需要编写这个函数来做很多事情，假设你已经有了三个列表： 1. 循环浏览你的三个列表。 2. 在此循环中，使用开关将接收到的值与其他两个选择的选项中的值进行比较。 3. 将这些值与从函数接收到的值进行比较，然后从选择中删除此选项。 4.刷新当前选择下拉列表，让JQuery正确显示元素。

您可能需要对其进行多次测试以确保其顺利运行，JQuery 可能有点古怪，因此请务必在执行所有这些操作时进行调试。