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

Question

我在编写函数以根据所选值隐藏两个单元格时遇到问题。 最大的问题是 生成的 HTML 可能只有一个或八个这样的选择。为了让事情变得更有趣，这个选择中的每一个都放在一个单独的 div 中，当一个显示时，其他的被隐藏。

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

$("#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 有效吗？或者还有其他解决方法吗？

Answer 1

随着 ID 的多次使用，它永远不会像您那样工作。在下文中，我已将所有 ID 更改为相关类，并修改了脚本以将其考虑在内...

HTML

<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 类，然后隐藏或显示它们。

Your jsfiddle, modified...