今天某人问我一个问题，有关<asp:CheckBox>和<asp:DropDownList>的JS的使用。
页面代码
<div>
<asp:Label ID="lblResult" runat="server" Text="Auto select">
</asp:Label>
<br />
<asp:CheckBox ID="chkManual" runat="server" Text="Manual select" onclick="check();" />
<br />
<asp:DropDownList ID="ddlManual" runat="server" Enabled="false" onchange="dropdown();">
<asp:ListItem Text="Manual select 1" Value="Manual select 1" />
<asp:ListItem Text="Manual select 2" Value="Manual select 2" />
<asp:ListItem Text="Manual select 3" Value="Manual select 3" />
<asp:ListItem Text="Manual select 4" Value="Manual select 4" />
</asp:DropDownList>
</div>
两段简单的JS如下：
< script language = " javascript " >
function check()
{
var checkbox=document.getElementById('chkManual');
var result=document.getElementById('lblResult');
var dropdown=document.getElementById('ddlManual');
if(checkbox.checked)
{
result.innerText='Manual select 1';
dropdown.disabled=false;
}
else
{
result.innerText='Auto select';
dropdown.selectedIndex=0;
dropdown.disabled=true;
}
}
function dropdown()
{
var result=document.getElementById('lblResult');
var dropdown=document.getElementById('ddlManual');
result.innerText=dropdown.value;
}
</ script >
情况是这样的，如下图：
Auto Select是一<asp:Label>;然后，接下来的是<asp:CheckBox>和<asp: DropDownList>。现在希望，当勾了Manual select后，可以从下拉列表中选择一个值，用来代替Auto select这个值。
很常见的一个应用。很多人问，对于这样的简单的应用，为什么不直接使用html控件？哎，我也这样想。但是，现实中是没办法 的，现在很多人习惯使用这样的asp控件，由于操作起来的简便性，VS很聪明的。OK，那么使用AutoPostBack属性不一样可以选来选去吗，为什 么要JS？嚯嚯，主要是好看些，页面不用闪啊闪啊的，那样很烦的，不是？
好了，废话少说，这是简单的应用，所以，三下五除二地，手动为<asp:CheckBox>添加一个onclick；为<asp:DropDownList>添加一个onchange。就是这么简单。
代码如下：
页面代码 <div> <asp:Label ID="lblResult" runat="server" Text="Auto select"> </asp:Label> <br /> <asp:CheckBox ID="chkManual" runat="server" Text="Manual select" onclick="check();" /> <br /> <asp:DropDownList ID="ddlManual" runat="server" Enabled="false" onchange="dropdown();"> <asp:ListItem Text="Manual select 1" Value="Manual select 1" /> <asp:ListItem Text="Manual select 2" Value="Manual select 2" /> <asp:ListItem Text="Manual select 3" Value="Manual select 3" /> <asp:ListItem Text="Manual select 4" Value="Manual select 4" /> </asp:DropDownList> </div>两段简单的JS如下：
< script language = " javascript " > function check() { var checkbox=document.getElementById('chkManual'); var result=document.getElementById('lblResult'); var dropdown=document.getElementById('ddlManual'); if(checkbox.checked) { result.innerText='Manual select 1'; dropdown.disabled=false; } else { result.innerText='Auto select'; dropdown.selectedIndex=0; dropdown.disabled=true; }} function dropdown() { var result=document.getElementById('lblResult'); var dropdown=document.getElementById('ddlManual'); result.innerText=dropdown.value;} </ script >
