使用Javascript更改和加载时显示/隐藏DIV部分

Show/Hide DIV section onchange and onload with Javascript

本文关键字：显示隐藏 DIV 部分加载 Javascript 使用更新时间：2023-09-26

我以为我已经想通了，但我错了。我有一个xsl表单，当表单上选择或出现特定值时，我想切换或显示/隐藏一个部分。我仅限于JavaScript，我感谢所有的帮助。

当用户选择选项时，隐藏的div部分显示和
当加载表单并且存在该值时，div部分显示

以下是我想使用的示例HTML来解决这个问题：

<select name="sbFruit" id="sbFruit" style="display:none;" title="Select your Fruit">
  <xsl:variable name="sbFruit" select="Fruit" />
  <xsl:for-each select="document('FRUIT_Lookups.xml')/lookups/FruitTypes/Fruit">
    <xsl:variable name="optFruit" select="value" />
    <option>
      <xsl:if test="$sbFruit = $optFruit">
        <xsl:attribute name="selected">true</xsl:attribute>
      </xsl:if>
      <xsl:attribute name="value">
        <xsl:value-of select="value"/>
      </xsl:attribute>
      <xsl:value-of select="value"/>
    </option>
  </xsl:for-each>
</select>
<!-- Toggled Group when 'sbFruit' = Orange -->
<div id="AppleSubGroup" name="AppleSubGroup" style="display: none;>"
  <label id="Orange_Fresh">Is the Orange Fresh?</label>
  <input name="Fresh" type="radio" value="Yes" />Yes
  <input name="Fresh" type="radio" value="No" />No
  <br />
  <label id="Orange_moldy">Is the Orange moldy?</label>
  <input name="Red" type="radio" value="Yes" />Yes
  <input name="Red" type="radio" value="No" />No
</div>

XML水果选择：

Apple
Blueberry
Orange
Pear

或简单HTML版本：

<select id="sbFruit" name="sbFruit">
  <option>Apple</option>
  <option>Blueberry</option>
  <option>Orange</option>
  <option>Pear</option>
</select>
<!-- Toggled Group when 'sbFruit' = Orange -->
<div id="AppleSubGroup" name="AppleSubGroup" style="display: none;>"
  <label id="Orange_Fresh">Is the Orange Fresh?</label>
  <input name="Fresh" type="radio" value="Yes" />Yes
  <input name="Fresh" type="radio" value="No" />No
  <br />
  <label id="Orange_moldy">Is the Orange moldy?</label>
  <input name="Red" type="radio" value="Yes" />Yes
  <input name="Red" type="radio" value="No" />No
</div>

谢谢你的帮助！

使用jQuery和HTML版本，这应该非常容易。您分配一个处理程序来检查是否选中了该选项，如果选中了，则显示或隐藏div

$("select[name='sbFruit']").change(function(event) {
    if ($(this).val() == 'Orange') {
        $('#OrangeSubGroup').hide();
    } else {
        $('#OrangeSubGroup').show();
    }
}).trigger('change');

.trigger('change')确保检查也在加载时完成。我不知道XML表单会怎样。它可能与此代码配合使用。

看看这个小提琴，看看这是否是你需要的。这是一个非常基本的版本，但仍然有效。

基本上，您需要执行以下操作：

为所有选项指定一个value属性（例如为选项Apple指定AppleSubGroup）。为每个选项分配的值必须与包含相关内容的Div的ID匹配。否则，这将不起作用
指定两个类，即hidden和visible，规则分别为display:none和display:block。当分配给您的子组时，将显示/隐藏它们
编写一个JS函数，根据选择将隐藏/可见类分配给子组。我假设你想要一个只有JS的版本（如果你对jQuery满意，请参阅Amboos的回答）
使用window.onload = showHide;在页面加载时调用此函数。这会将与默认选定值相对应的子组设置为在页面加载时可见
将onChange="showHide();"属性添加到select标记中。这将在每次修改选择时调用该函数

注意：我已经为您的子组部分添加了一个带有id="SubGroup"的包装器div。

window.onload = showHide;
function showHide(){
    var el = document.getElementById("sbFruit");
    var selectedVal = el.options[el.selectedIndex].value;
    var subGroupEl = document.getElementById("SubGroup").getElementsByTagName("div");
    for(var i=0; i<subGroupEl.length; i++){
        subGroupEl[i].className = "hidden";
    }
    document.getElementById(selectedVal).className = "visible";
}