asp.net 中RadioButtonList的选项改变事件处理(采用jquery操作)

4445人阅读 评论(1) 收藏 举报
分类:

实现的效果如下图所示:

                                

可以设置RadioButtonList的autopostback属性为true,然后处理其OnSelectedIndexChanged事件,但是这样会造成回发事件,造成页面刷新,用户体验不好,于是这里采用jquery来操作。


aspx中的页面如下代码所示:

  <div style="height: 35px;">
      <table width="170px">
              <tr>
                    <td style="width:30px;">
                             <asp:Label ID="lblDate" runat="server" Text="对比:">
                                        </asp:Label></td>
                     <td style="width:80px;">
                                        <asp:DropDownList ID="ddlYear" runat="server" ></asp:DropDownList>年</td>
                      <td style="width:60px;">
                            <span id="divMonth" style="display:none;">
                                  <asp:DropDownList ID="ddlMonth" runat="server"></asp:DropDownList>月</span>
                     </td>
               </tr>
       </table>
  </div>
  <div style="height: 35px;">
        <asp:RadioButtonList runat="server" ID="rblType">
                   <asp:ListItem Value="年" Text="年同环比" Selected="True"></asp:ListItem>
                    <asp:ListItem Value="月" Text="月同环比"></asp:ListItem>
         </asp:RadioButtonList>
   </div>


这里使用jquery来处理RadioButtonList的change事件,代码如下:

 $(function () {
      $("#<%=rblType.ClientID %>").change(function () {
            var SelectVal = $(":input:radio[@name='#<%= rblType.ClientID%> > input'][checked]").val()
            if (SelectVal != "年") {
                  $("#divMonth").css("display", "block");
            }
            else {
                 $("#divMonth").css("display", "none");
            }
     });
 });

jquery中获取RadioButtonList中选中的值方法:

 //获取页面加载时RadioButtonList选中的值
 var SelectVal = $(":input:radio[@name='#<%= rblType.ClientID%> > input'][checked]").val();

获取ASP.NET DropDownList控件下拉选项改变时,显示或隐藏某个控件的jquery写法类似如下:

 $(function () {
      $("#<%=Comb_EnergyType.ClientID %>").change(function () {
          var SelectVal = $("#<%= Comb_EnergyType.ClientID%> option:selected").val();
            if (SelectVal == "01000") {
                $("#divSubEnergy").css("display", "block");
            }
            else {
                $("#divSubEnergy").css("display", "none");
            }
     });
 });



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    .NET SL GIS开发群
    欢迎大家加入群,交流分享GIS开发的点点滴滴,共同进步!
    群号1:106887513
    群号2:125514226

    宣传下本人翻译新书《JavaScript构建Web和ArcGIS Server应用实战》,有需要的朋友们支持一下!


          点击下载书籍源码
    程序生活
    博客专栏
    个人资料
    • 访问:1402301次
    • 积分:19895
    • 等级:
    • 排名:第408名
    • 原创:570篇
    • 转载:61篇
    • 译文:3篇
    • 评论:376条
    最新评论