zoukankan      html  css  js  c++  java
  • 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函数对选项进行动态控制。

    文章出处:www.cnblogs.com/jizhong

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。否则保留追究法律责任的权利。

  • 相关阅读:
    Java中的String,StringBuilder,StringBuffer三者的区别
    安装ik分词器以及版本和ES版本的兼容性
    利用logstash从mysql同步数据到ElasticSearch
    安装logstash和logstash-input-jdbc
    mac 下安装ES 与 Head插件 以及安装Kibana
    数据库备份出现警告:Warning: Using a password on the command line interface can be insecure. Warning: A partial dump from a server that has GTIDs will by default include the GTIDs of all transactions, even thos
    Mybatis 中$与#的区别
    spring boot Tomcat访问日志
    spring boot配置druid数据源和监控配置
    kafka基本概念
  • 原文地址:https://www.cnblogs.com/jizhong/p/1509355.html
Copyright © 2011-2022 走看看