Question

我以为我想到了这个，但我错了。我有一个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 Fruit Choices：

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>

感谢您的帮助！

Answer 1

使用jQuery和HTML版本应该非常简单。您指定一个处理程序，检查是否选中了该选项，如果是，则显示或隐藏div。

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

.trigger('change')确保检查也在加载时完成。我不知道它是如何形成XML格式的。它可能适用于此代码。

Answer 2

查看此fiddle，看看这是否是您需要的。这是一个非常基本的版本，但仍然可以完成工作。

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

为所有选项分配value属性（例如AppleSubGroup选项Apple）。为每个选项指定的值必须与包含与其相关内容的Div的ID匹配。否则这不起作用。
指定两个类，即hidden和visible，规则分别为display:none和display:block。分配给子组时，将显示/隐藏它们。
编写JS函数，根据选择将隐藏/可见类分配给子组。我假设你想要一个只有JS的版本（如果你对jQuery没问题，请参考Ambroos的答案）
使用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";
}

使用Javascript显示/隐藏DIV部分onchange和onload

2 个答案: