为CheckBox和DropDownList添加一个简易的JavaScript

 

今天某人问我一个问题，有关<asp:CheckBox>和<asp:DropDownList>的JS的使用。
情况是这样的，如下图：

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>