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函数对选项进行动态控制。