给服务器端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+"')");
    }

你可能感兴趣的:(onchange)