DropDownList运用JavaScript实现选项添加与删除

问题场景：

有两个下拉框ddlPriceType与ddlMonth。代码分别如下：

 

<asp:DropDownList ID="ddlPriceType" runat="server" onchange="SetMonthByType();">
                    <asp:ListItem Value="0">年度计划价</asp:ListItem>
                    <asp:ListItem Value="1">月度现行价</asp:ListItem>
                </asp:DropDownList>

 

<asp:DropDownList ID="ddlMonth" runat="server">
                    <asp:ListItem Value="00">全部</asp:ListItem>
                    <asp:ListItem Value="01">一月</asp:ListItem>
                    <asp:ListItem Value="02">二月</asp:ListItem>
                    <asp:ListItem Value="03">三月</asp:ListItem>
                    <asp:ListItem Value="04">四月</asp:ListItem>
                    <asp:ListItem Value="05">五月</asp:ListItem>
                    <asp:ListItem Value="06">六月</asp:ListItem>
                    <asp:ListItem Value="07">七月</asp:ListItem>
                    <asp:ListItem Value="08">八月</asp:ListItem>
                    <asp:ListItem Value="09">九月</asp:ListItem>
                    <asp:ListItem Value="10">十月</asp:ListItem>
                    <asp:ListItem Value="11">十一月</asp:ListItem>
                    <asp:ListItem Value="12">十二月</asp:ListItem>
                </asp:DropDownList>

 

现在想实现的功能是：若ddlPriceType选中第一项，则只能选中ddlMonth下拉框中“全部”，否则可以选中ddlMonth下拉框中除“全部”以外选项。

经过实践与思考，功能最终得以实现。代码如下：

 

<script type="text/javascript">
    function SetMonthByType() { 
    
        var control       = $get("<%= ddlPriceType.ClientID %>");
        var selectedValue = control.options[control.selectedIndex].value;
        var month         = $get("<%=ddlMonth.ClientID %>");

        if (selectedValue == "0") 
        {
            if (month.options[0].value != "00") 
            {
                var opt = document.createElement("option"); opt.innerHTML = "全部";opt.value = "00";
                month.insertBefore(opt, month.firstChild);
            }
            month.selectedIndex = 0;
            month.disabled = true;
        }
        else 
        {
            if (month.options[0].value == "00") { month.options.remove(0); }
            month.disabled = false;
        }
    }
</script>

 

注：页面中DropDownList中初始加载选项时，必须加载全部。然后利用javascript函数对选项进行动态控制。