给服务器端DropDownList控件添加客户端onchange事件

• Posted by Admin on 九月 9, 2009
• 0 comments

  我们在许多是时候，要在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代码是：
   <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中加上：
     MyDropDownListSex.Attributes.Add("onchange", "selectChange(this,'"+this.MyDropDownListSex.ClientID+"')");
    F5运行，然后选择，那么结果就出来了 ，From:0 To:MyDropDownListSex，正如我们所希望的结果。

       还有一种情况就是我们的DropDownList包含在一个数据列表控件中比如：repeater中，那么我们在onPage_Load事件中就没有MyDropDownList这个控件了，那我们怎么实现呢？其实很简单，如果我们能够找到这个MyDropDownList空间就行了，由于这个比较简单，在这就不详细说明了，就列出一些代码看看就行了。
      List 1:
<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:
      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();
       List 3:
        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+"')");
    }