首页 > 技术文章 > select控件的操作方法,JS封装

loushuibazi 2014-07-30 11:33 原文

 

javascript封装,调用的话需要实例化,这个操作方法没有使用静态类了

 

调用的时候,实例化,然后点对应的方法就可以了,传入对应的参数

<script language="javascript" type="text/ecmascript">
        // 定义 CommonHtmlOperation.js 文件中的公共类
        var html_sel_op = new HtmlSelectOperation();        // 操作select控件
    </script>

 

 

/// <summary>
/// select 控件操作方式
/// <summary>
{
    function HtmlSelectOperation() {

        /// <summary>
        /// 获取select中选中的value
        /// <summary>
        this.GetSelectedValue = function (selId) {
            var selObj = document.getElementById(selId);
            var index = selObj.selectedIndex;
            return selObj.options[index].value;
        }

        /// <summary>
        /// 获取select中选中的text
        /// <summary>
        this.GetSelectedText = function (selId) {
            var selObj = document.getElementById(selId);
            var index = selObj.selectedIndex;
            return selObj.options[index].text;
        }

        /// <summary>
        /// 获取select中选中的index
        /// <summary>
        this.GetSelectedIndex = function (selId) {
            return document.getElementById(selId).selectedIndex;
        }

        /// <summary>
        /// 添加单个option
        /// <summary>
        this.AddOption = function (selId, text, value) {
            var selObj = document.getElementById(selId);
            if (selObj != null) {
                if (text == null) { text = ""; }
                if (value == null) { value = ""; }
                selObj.options.add(new Option(text, value));
            }
        }

        /// <summary>
        /// 添加多个option
        /// <summary>
        this.AddOptions = function (selId, textArr, valueArr, isDelAll) {
            var selObj = document.getElementById(selId);
            if (selObj != null) {

                // 根据传递的bool类型的isDelAll,判断在加载option之前是否需要清空原有项
                if (isDelAll) {
                    selObj.options.length = 0;
                }

                if (textArr == null) { textArr = new Array(); }
                if (valueArr == null) { valueArr = new Array(); }

                // 加载option
                for (var i = 0; i < textArr.length; i++) {

                    var selText = textArr[i];
                    var selValue = "";

                    // 检测两个数组中的项数是否能一一对应,若对应不上,则空值替代
                    if ((valueArr.length - 1) >= i) {
                        selValue = valueArr[i];
                    }

                    // 添加到页面
                    selObj.options.add(new Option(selText, selValue));
                }
            }
        }


        /// <summary>
        /// 删除当前选中项
        /// <summary>
        this.DeleteSelected = function (selId) {
            var selObj = document.getElementById("selId");
            var index = selObj.selectedIndex;
            selObj.options.remove(index);
        }

        /// <summary>
        /// 删除当前选中项
        /// <summary>
        this.DeleteAllOption = function (selId) {
            var selObj = document.getElementById("selId");
            selObj.options.length = 0;
        }

    }
}

 

推荐阅读