Show | Showに応じてDivを隠すDropDownList

Question

このことはあまりにも単純ですが、特定のListItemでdivを表示する方法は分かりますか？

私のコードは次のとおりです。

<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の持っている上：これはCSSは、デフォルトでは非表示になってDIV

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

を。 ユーザーがドロップダウンで「いいえ」を選択すると、divが表示されます。 私はそれが通常JavaScriptで行われていることを知っていますが、私はそれを行う方法を理解していませんでした。

ありがとうございました。

P.S.

もう少し小さな質問があります。 SQLデータベースにテーブルがある場合は、ユーザーと呼び、名前、ID列があります。 列全体を読み込んでドロップするにはどうすればいいですか？ユーザーが名前を選択した場合、それはIDです。 jQueryのに本部の隠ぺいや上映を使用して

Answer 1

が前方にかなりストレートです：

$(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をどのように割り当てるかは既に分かっています。

Answer 2

​​

See example here.

Answer 3

<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"; 
    } 
} 

Answer 4

あなたはjqueryのを使用している場合は、

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

Answer 5

は、コードをより簡素化することができませんでしたか？

---

マークアップ

<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の