0

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

这是我的桌子

<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
4

4 回答 4

3

干得好：

$('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();
});​
于 2012-05-29T16:17:04.667 回答
1

得到答案。干得好

$('.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();
于 2012-05-30T09:48:10.263 回答
0

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

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

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

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

于 2012-05-29T16:18:41.283 回答
0

您想要做的大部分事情之前已经在这个问题中介绍过：Removing an item from a select box

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

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

于 2012-05-29T16:14:07.510 回答