根据选择值生成的HTML隐藏单元格

Hide cells depending on select value - generated HTML

本文关键字：HTML 隐藏 单元格 选择      更新时间：2023-09-26

我有一个问题，写一个函数来隐藏两个单元格取决于所选的值。最大的问题是生成了HTML，并且可以有一个或八个这样的选择。为了让事情更有趣，每一个选择都被放置在一个单独的div中，当一个显示时，其他的被隐藏。

下面是我用来切换单元格的函数。单元格只有在选定值为"Z"时才能显示，否则它们必须被隐藏。它只对第一次选择起作用，而其他选择完全被忽略。我试图使用.each()函数与id="selector"的每个元素，但有相当多的元素索引，它也不起作用。

$("#selector").change(function(){
  if($(this).val().trim() == 'Z'){
      $("#labelToHide").toggle(true);
      $("#selectToHide").toggle(true);
  } else {
      $("#labelToHide").toggle(false);
      $("#selectToHide").toggle(false);
  }
});

下面是工作的JSFiddle。它可能看起来不完整，但足以模拟真实情况。下面是生成HTML的XML代码。

<xh:td class="RightColumn" id="selectToHide">
    <form:selectOne ...>
        <!-- form code -->
    </form:selectOne>
</xh:td>

是否有一些方法我可以使这个脚本只适用于当前显示的div?还是有其他的解决方法?

在多次使用id的情况下，它永远不会像您那样工作。在下文中，我将所有id更改为相关类，并修改脚本以考虑到这一点…

<div id="divOne">
    <table class="gridtable">
        <tr>
            <td id="allwaysShown">Allways Shown</td>
            <td id="allwaysShown">
                <select class="selector">
                    <option value="Z">Z</option>
                    <option value="X">X</option>
                </select>
            </td>
            <td class="toHide">Hide this</td>
            <td class="toHide">
                <select>
                    <option value="Y">Yes</option>
                    <option value="N">No</option>
                </select>
            </td>
        </tr>
    </table>
</div>
<div id="divTwo">
    <table class="gridtable">
        <tr>
            <td id="allwaysShown">Allways Shown</td>
            <td id="allwaysShown">
                <select class="selector">
                    <option value="Z">Z</option>
                    <option value="X">X</option>
                </select>
            </td>
            <td class="toHide">Hide this</td>
            <td class="toHide">
                <select>
                    <option value="Y">Yes</option>
                    <option value="N">No</option>
                </select>
            </td>
        </tr>
    </table>
</div>
Javascript

$(".selector").change(function () {
    if ($(this).val().trim() == 'Z') {
        $(this).closest("tr").find(".toHide").show();
    } else {
        $(this).closest("tr").find(".toHide").hide();
    }
});

现在所做的是，当一个选择元素(类selector)发生变化时，它解析DOM以找到包含它的行，然后找到类toHide的所有元素，并隐藏或显示它们。

你jsfiddle、修改…

一旦您通过将多个id更改为class来解决问题，您可以使用以下命令:

$(".selector").change(function () {
 if ($(this).val().trim() == 'Z') {
    $(this).parent().nextAll("td").show();
 } else {
    $(this).parent().nextAll("td").hide();
 }
});
$(".selectToHide select").change(function () {
 if ($(this).val().trim() == 'Y') {
    $(this).parent('td').prev().show();
 } else {
    $(this).parent('td').prev().hide();
 }
});

更新小提琴

必须使用唯一的id ，使用classes代替id来对元素进行分组。而不是切换使用显示/隐藏和分配公共类的选择和标签，例如toShowHide和使用单个调用显示隐藏两者。我已经更改了html属性，只是为了演示您应该根据您的需求进行更改，记住id必须是唯一的。

现场演示 

$(".selector").change(function () {
    if ($(this).val().trim() == 'Z') 
        $(this).parent().siblings(".toShowHide").show();        
     else 
        $(this).parent().siblings(".toShowHide").hide();
});

在HTML中的id都是唯一的，这意味着在一个HTML页面上只能有一个具有相同名称的id，如果你以前使用过#selector，你不应该再使用它(它首先不会起作用)

总是使用一个类。

这里是你的工作代码你需要它

    <div id="divOne">
        <table class="gridtable">
            <tr>
                <td class="allwaysShown">Allways Shown</td>
                <td class="allwaysShown">
                    <select class="selector">
                        <option value="Z">Z</option>
                        <option value="X">X</option>
                    </select>
                </td>
                <td class="hide_this">Hide this</td>
                <td class="hide_this">
                    <select>
                        <option value="Y">Yes</option>
                        <option value="N">No</option>
                    </select>
                </td>
            </tr>
        </table>
    </div>
    <div id="divTwo">
        <table class="gridtable">
            <tr>
                <td class="allwaysShown">Allways Shown</td>
                <td class="allwaysShown">
                    <select class="selector">
                        <option value="Z">Z</option>
                        <option value="X">X</option>
                    </select>
                </td>
                <td class="hide_this">Hide this</td>
                <td class="hide_this">
                    <select>
                        <option value="Y">Yes</option>
                        <option value="N">No</option>
                    </select>
                </td>
            </tr>
        </table>
    </div>
JQuery

    $(".selector").change(function () {
        if ($(this).val().trim() == 'Z') {
            $(this).closest('tr').find('.hide_this').show();
        } else {
            $(this).closest('tr').find('.hide_this').hide();
        }
    });
相关文章：