用Javascript顯示/隱藏DIV部分onchange和onload

我以爲我有這個想法，但我錯了。我有一個xsl表單，我希望在表單上選擇或存在特定值時切換或顯示/隱藏某個部分。我僅限於JavaScript，我感謝所有幫助。用Javascript顯示/隱藏DIV部分onchange和onload

當用戶選擇選項，隱藏的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>

感謝您的幫助！

來源

2013-08-05 Mystified

嘗試更改要顯示或隱藏的div的顯示類（塊/無） –

看看這個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"; 
}

來源

2013-08-05 17:43:32 Harry

感謝這很好。我遇到的唯一問題是我只需要爲其中一個選項做這項工作，其他人不需要子組。在我的環境中，它不喜歡空值。我如何調整JS以適應此？ – Mystified

＃4的第二個問題是否可以只添加到我的 \t標記？並從JS中刪除它？什麼是親/這樣做？ – Mystified

這兩者之間沒有太大的區別，可以使用，但我更喜歡'window.onload'。檢查[**這**]（http://stackoverflow.com/questions/191157/window-onload-vs-body-onload）SO帖子獲取更多信息。 – Harry

使用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-05 17:34:10 Ambroos

用Javascript顯示/隱藏DIV部分onchange和onload

回答

相關問題