0

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

  1. 当用户选择选项时，隐藏的 div 部分显示和
  2. 当表单被加载并且该值存在时，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>

感谢您的帮助！

4

2 回答 2

1

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

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

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

于 2013-08-05T17:34:10.213 回答
-1

看看这个小提琴，看看这是否是你需要的。这是一个非常基本的版本，但仍然可以工作。

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

  1. 为所有选项分配一个value属性（例如AppleSubGroupoption Apple）。为每个选项分配的值必须与具有相关内容的 Div 的 ID 匹配。否则这将行不通。
  2. 分别指定两个类，即hidden和visible，规则分别为display:none和display:block。这在分配给您的子组时将显示/隐藏它们。
  3. 编写一个 JS 函数，根据选择将隐藏/可见类分配给子组。我假设您想要一个仅 JS 的版本（如果您对 jQuery 没问题，请参阅 Ambroos 的回答）
  4. 使用 . 在页面加载时调用此函数window.onload = showHide;。这会将与默认选定值对应的子组设置为在页面加载时可见。
  5. 将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";
}
于 2013-08-05T17:43:32.210 回答