顯示|隱藏Div取決於顯示DropDownList

我知道這件事太簡單，但我如何顯示特定的ListItem div？顯示|隱藏Div取決於顯示DropDownList

我的代碼是：

<asp:DropDownList ID="dropYesNo" runat="server"> 
    <asp:ListItem Text="Choose..." Value="-1"></asp:ListItem> 
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem> 
    <asp:ListItem Text="No" Value="0"></asp:ListItem> 
</asp:DropDownList>

後來我有一個div：

<div id="optional"> 
    <p>Please Enter Your Reason</p></br> 
    <asp:TextBox ID="_refuse" runat="server" TextMode="MultiLine" /> 
    </br> 
</div>

這個DIV + CSS默認是隱藏的。我希望當用戶在下拉菜單中選擇「否」時，div會出現。我知道這通常是用JavaScript完成的，但我不明白該怎麼做。

謝謝。

P.S.

我還有一個小的相關問題，如果我有一個表在我的SQL分貝讓我們稱之爲用戶，它有名稱，ID列。我如何加載整個列下拉，所以如果用戶選擇一個名稱是它的ID。

來源

2011-02-04 RonenIL

向另一問題作爲一個單獨一個。多數民衆贊成在如何工作... – naveen 2011-02-04 17:07:59

您的第二個問題檢查此鏈接：http://stackoverflow.com/questions/4242766/binding-a-dropdownlist-to-a-database – naveen 2011-02-04 17:09:47

使用jQuery的div隱藏和顯示是非常簡單的：

$(function() { 
    $("#dropYesNo").change(function() { 
    ToggleDropdown(); 
    }); 
    ToggleDropdown(); // Done to ensure correct hiding/showing on page reloads due to validation errors 
}); 

function ToggleDropdown() { 
    if ($("#dropYesNo").val() == "No") { 
    $("#optional").show(); 
    } else { 
    $("#optional").hide(); 
    } 
};

數據庫方面真的取決於你正在使用和將正常進行服務器端的平臺。您已經知道如何分配Text和Value屬性，Text = Name，Value = ID。

來源

2011-02-04 16:44:12 Lazarus

See example here.

來源

2011-02-04 16:45:38 mVChr

<asp:DropDownList ID="dropYesNo" runat="server" onchange="ToggleVisible(this);"> 
    <asp:ListItem Text="Choose..." Value="-1"></asp:ListItem> 
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem> 
    <asp:ListItem Text="No" Value="0"></asp:ListItem> 
</asp:DropDownList> 

function ToggleVisible(ddl) 
{ 
    var div = document.getElementById('optional'); 
    var value = ddl.options[ddl.selectedIndex].value; 
    if(value == 1) 
    { 
    div.style.display = "none"; 
    } 
    else 
    { 
    div.style.display = "block"; 
    } 
}

來源

2011-02-04 16:49:34 Phaedrus

如果您正在使用jQuery然後

function pageLoad() { 
    $('#dropYesNo').change(function() 
    { 
     if($(this).attr('value')=='0') 
     $('optional').show(); 
     else 
     $('optional').hide(); 
    }); 
}

來源

2011-02-04 16:50:19

無法代碼更簡單？

的標記

<asp:DropDownList ID="dropYesNo" runat="server" onchange="SetTextArea(this.value)"> 
    <asp:ListItem Text="Choose..." Value="-1"></asp:ListItem> 
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem> 
    <asp:ListItem Text="No" Value="0"></asp:ListItem> 
</asp:DropDownList> 

<div id="optional" style='display:none'> 
     <p>Please Enter Your Reason</p></br> 
     <asp:TextBox ID="_refuse" runat="server" TextMode="MultiLine" ></asp:TextBox> 
     </br> 
</div>

的JavaScript

來源

2011-02-04 16:57:26 naveen

顯示|隱藏Div取決於顯示DropDownList

回答

相關問題