我们在许多是时候,要在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 >
< 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>
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 >
< 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();
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+"')");
}
{
DropDownList dl = (DropDownList)e.Item.FindControl("DropDownList1");
HiddenField hf = (HiddenField)e.Item.FindControl("myyear");
dl.Attributes.Add("onchange", "JavaScript:selectChange(this,'"+hf.Value+"')");
}