2

私は 3 つのオプションを持つ RadioButtonList を持っています:

<asp:RadioButtonList ID="RadioButtonList1" runat="server">
        <asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
         <asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
         <asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
    </asp:RadioButtonList>

3つのdivがあり、それぞれにテキストボックスと検索用のボタンがあります。radiobuttonlist を使用するにはどうすればよいですか? いくつかのラジオをチェックすると、1 つの div のみが表示されます

4

3 に答える 3

6

これには 2 つの方法があります。必要に応じて、クライアント側で行うか、サーバー側で行うことができます。

サーバー側の解決策AutoPostBack: RadioButtonListのプロパティを true に追加する必要があります。これによりdivs、プロパティが次のようにrunat設定されます。server

マークアップ:

<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
    <asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
     <asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
     <asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
</asp:RadioButtonList>

<div id="myDiv1" runat="server" visible="false">Div Content</div>

コードビハインド:

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (this.RadioButtonList1.SelectedValue =="2")
                this.myDiv1.Visible = true;
    else
        this.myDiv1.Visible = false;

}

クライアント側のソリューション:

Javascript :

 window.onload = function () {
            var inputs = document.getElementsByTagName("input");

            if (inputs.length > 0) {
                for (var i = 0; i < inputs.length; i++) {
                    if (inputs[i].type == "radio") {
                        inputs[i].onclick = function () {
                            if (this.value == "2") {
                                document.getElementById("div1").style.display = "block";
                            }
                            else {
                                document.getElementById("div1").style.display = "none";
                            }
                        }
                    }
                }
            }
        }

マークアップ:

<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" >
    <asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
        <asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
        <asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
</asp:RadioButtonList>

<div id="div1" style="display:none">Div Content</div>

もちろん、これによりページ内のすべてのラジオ ボタンが取得されるため、正しいボタンを取得したことを確認する必要がある場合があります。

于 2013-04-08T16:59:44.460 に答える
2

を設定しAutoPostback = "true"、イベントを処理してからOnSelectedIndexChanged、コード ビハインドで適切な div を表示/非表示にする必要があります。このようなもの：

<asp:RadioButtonList AutoPostBack="True"  
 OnSelectedIndexChanged="Index_Changed" ID="RadioButtonList1" runat="server">
    <asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
     <asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
     <asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
</asp:RadioButtonList>


protected void Index_Changed(Object sender, EventArgs e) 
{

   if(RadioButtonList1.SelectedIte.Value=="1")
   {
      div1.Visible=true;
      div2.Visible=false;
      div3.Visible=false;
   else if(RadioButtonList1.SelectedIte.Value=="2")
   {
      div2.Visible=true;
      //and so on...
   }
}

明らかに、div 自体はサーバー側のコントロールでなければならないため、次のように宣言する必要があります。

<div id="div1" runat="server">
content here
</div>
于 2013-04-08T16:59:24.557 に答える