表中的 Jquery 依赖下拉列表

Jquery dependant dropdown inside table

本文关键字:依赖 下拉列表 Jquery      更新时间:2023-09-26

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

这是我的桌子

<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

你来了:

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

得到答案。给你

$('.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 选择器,您需要获取表示选择框的 jQuery 对象,并根据调用 parent() 方法的结果调用 parent() 方法。 在选择上调用 parent() 方法的结果是一个表单元格,在表单元格上调用 parent() 方法的结果是一个表行。

不止一种方法可以给这只猫剥皮,但以上应该可以帮助你入门。

有许多

方法可以实现此目的,具体取决于您对动态网页开发的熟悉程度。首先,您应该为每个下拉列表提供不同的 id,以便您可以通过执行$('#yourdropdownID')document.getElementById(...)来选择它们。

在您的<select>上,您将需要使用onClick或onChange(取决于您希望它的"外观和感觉"),它将调用接受所选选项的函数。例如:<select onClick='removeOption(this);'>

您需要对此函数进行编码才能执行许多操作,假设为了论证起见,您已经有三个列表: 1. 遍历您的三个列表。 2. 在此循环中,使用开关将收到的值与其他两个选项的选项中的值进行比较。 3. 将这些值与从函数接收的值进行比较,并从选择中删除此选项。 4. 刷新当前选择下拉列表,以便 JQuery 正确显示元素。

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