zoukankan      html  css  js  c++  java
  • 给服务器端DropDownList控件添加客户端onchange事件

    我们在许多是时候,要在DropDownList添加一个onchange事件,在.Cs文件中我们还有一个onSelectedIndexChanged事件,我们添加它的onchange事件,大部分就是为了在客户端先让用户确认一下,在回传服务器,提高用户体验性。
           而如果我们在Html源代码中,自己给它加上onchange事件的话,有可能提示"服务器标记不正确"或你没有得到你所期望的值。

    For Example: 



    <asp:DropDownList runat="server" ID="MyDropDownListSex" onchange="JavaScript:selectChange(this,'<%= MyDropDownListSex.ClientID %>');">
        
    <asp:ListItem>boy</asp:ListItem>
        
    <asp:ListItem>girl</asp:ListItem>
        
    </asp:DropDownList>

    其中调用的js代码是:

    Code
    <script type="">
    function selectChange(from,to)
                {
                   alert(
    "From:"+from.selectedIndex+" To: "+to);
                }
    </script>

    我们如果执行上面的代码,会提示什么呢?你一定认为它提示的是 From:0 To:MyDropDownListSex,但是事与愿违,它提示的却是From:0 To:<%= MyDropDownListSex.ClientID %>。为什么会出现这个结果呢?查阅了一些资料也没有获得满意的结果,如果哪位有知道的还请指导。咱们还是接着往下说解决办法。
          那如果我们真的想这么做的话,难道就没有办法解决了吗?不,我们可能经常给TextBox在后台添加属性,那么我们也可以在后台动态给DropDownList动态的加上onchange属性,那我们试试:在.Cs中OnPage_Load中加上:


    Code
    MyDropDownListSex.Attributes.Add("onchange""selectChange(this,'"+this.MyDropDownListSex.ClientID+"')");


    F5运行,然后选择,那么结果就出来了 ,From:0 To:MyDropDownListSex,正如我们所希望的结果。

           还有一种情况就是我们的DropDownList包含在一个数据列表控件中比如:repeater中,那么我们在onPage_Load事件中就没有MyDropDownList这个控件了,那我们怎么实现呢?其实很简单,如果我们能够找到这个MyDropDownList空间就行了,由于这个比较简单,在这就不详细说明了,就列出一些代码看看就行了。
          List 1: 


    Code
    <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
            
    <ItemTemplate>
            
    <%#Eval("name"%>
            
    <asp:HiddenField ID="myyear" runat="server" Value='<%#Eval("year") %>' />
            
    <asp:DropDownList ID="DropDownList1"   runat="server">
            
    <asp:ListItem>1</asp:ListItem>
            
    <asp:ListItem>2</asp:ListItem>
            
    </asp:DropDownList>

     List 2:


    Code
    DataTable dt = new DataTable();
            dt.Columns.Add(
    "name");
            dt.Columns.Add(
    "age");
            dt.Columns.Add(
    "year");
            DataRow dr 
    = dt.NewRow();
            dr[
    0= "兴百放";
            dr[
    1= "22";
            dr[
    2= "1986";
            dt.Rows.Add(dr);

            DataRow dr2 
    = dt.NewRow();
            dr2[
    0= "王明";
            dr2[
    1= "25";
            dr2[
    2= "1984";
            dt.Rows.Add(dr2);

            
    this.Repeater1.DataSource = dt;
            
    this.Repeater1.DataBind();

    Code
    protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            DropDownList dl 
    = (DropDownList)e.Item.FindControl("DropDownList1");
            HiddenField hf 
    = (HiddenField)e.Item.FindControl("myyear");
            dl.Attributes.Add(
    "onchange""JavaScript:selectChange(this,'"+hf.Value+"')");
        }

  • 相关阅读:
    文件恢复工具Recuva安装与使用
    卸载工具Geek安装与使用(超全面)
    聚类总结
    Github访问加速
    机器学习常用网站(大牛推荐)
    知识表示之框架表示法
    知识表示之产生式表示法
    知识表示之一阶谓词逻辑表示
    ubuntu下如何解压zip文件(超详细)
    常用学习网站及资料(经常逛)
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/1678260.html
Copyright © 2011-2022 走看看