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

このフィドルをチェックして、これが必要かどうかを確認してください。これは非常に基本的なバージョンですが、それでも機能します。

基本的に、次のことを行う必要があります。

  1. すべてのオプションに属性を割り当てvalueます (AppleSubGroupオプションの場合Appleなど)。各オプションに割り当てられた値は、関連するコンテンツを持つ Div の ID と一致する必要があります。そうでなければ、これはうまくいきません。
  2. 2 つのクラス、すなわちhiddenおよびをそれぞれおよびvisibleとしてルールで指定します。これは、サブグループに割り当てられると、それらを表示/非表示にします。display:nonedisplay: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 に答える