【转】javascript操作Select标记中options集合

先来看看options集合的这几个方法：
options.add(option)方法向集合里添加一项option对象；
options.remove(index)方法移除options集合中的指定项；
options(index)或options.item(index)可以通过索引获取options集合的指定项；

javascript代码如下：

var  selectTag  =   null ;  // select标记
     var  OPTONLENGTH  =   10 ;  // 每次填充option数
     var  colls  =  [];        // 对select标记options的引用

    window.onload  =   function () {
        selectTag = document.getElementById("SelectBox"); //获取select标记        
        colls = selectTag.options; //获取引用
        //initSelectBox();    //自初始化select.options
    } ;
    
     // 使用随机数填充select.options
     function  initSelectBox() {
        var random = 0 ;
        var optionItem = null;
        var item = null;
        
        if(colls.length > 0 && isClearOption()){
             clearOptions(colls);
        }

        for(var i=0;i<OPTONLENGTH;i++){
             
            random = Math.floor(Math.random()*9000)+1000;
            item = new Option(random,random);    //通过Option()构造函数创建option对象        
            selectTag.options.add(item); //添加到options集合中
        }    
        
        watchState();
    }
     // 添加新option项前是否清空当前options
     function  isClearOption() {
        return document.getElementById("chkClear").checked;
    }
     // 清空options集合
     function  clearOptions(colls) {
        var length = colls.length;
        for(var i=length-1;i>=0;i--){
            colls.remove(i);
        }
    }
     // 添加一项新option
     function  addOption() {
        colls.add(createOption());
        lastOptionOnFocus(colls.length-1);
        watchState();
    }
     // 创建一个option对象
     function  createOption() {
        var random = Math.floor(Math.random()*9000)+1000;
        return new Option(random,random);
    }
     // 删除options集合中指定的一项option
     function  removeOption(index) {        
        if(index >= 0){
            colls.remove(index);
            lastOptionOnFocus(colls.length-1);
        }
        watchState();
    }
     // 获取当前选定的option索引
     function  getSelectedIndex() {
        return selectTag.selectedIndex;
    }
     // 获取options集合的总数
     function  getOptionLength() {
        return colls.length;
    }
     // 获取当前选定的option文本
     function  getCurrentOptionValue(index) {
        if(index >= 0)
            return colls(index).value;
    }
     // 获取当前选定的option值
     function  getCurrentOptionText(index) {
        if(index >= 0)
            return colls(index).text;
    }
     // 使用options集合中最后一项获取焦点
     function  lastOptionOnFocus(index) {
        selectTag.selectedIndex = index;
    }
     // 显示当select标记状态
     function  watchState() {
        var divWatch = document.getElementById("divWatch");
        var innerHtml="";
        innerHtml  = "option总数:" + getOptionLength();
        innerHtml += "<br/>当前项索引:" + getSelectedIndex();
        innerHtml += "<br/>当前项文本:" + getCurrentOptionText(getSelectedIndex());
        innerHtml += "<br/>当前项值:" + getCurrentOptionValue(getSelectedIndex());
        divWatch.innerHTML = innerHtml;
        divWatch.align = "justify";
    }

注意到上面创建option项时，使用了Option()构造函数，这个构造函数有两个版本的重载。
1、var option = new Option(text,value); //这里要大写Option()
2、var option = new Option();
       option.text = text;
       option.value=value;
我个人比较喜欢第一种方法来创建option对象。
另外，select标记还有一个比较有用的属性就是selectedIndex，通过它可能获取当前选择的option索引，或通过索引设置指定options集合中哪一项被选择。
   select.selctedIndex = select.options.length-1; //将options集合中最后一项选中
   var selectedItem = select.options(select.selectedIndex);//获取当前选中项
   selectedItem.text; //选中项的文本
   selectedItem.value; //选中项的值

< BODY >
   < Select  name ="SelectBox" >
   </ Select >
   < hr />
     < div  id ="divWatch"  style ="background-color:beige;width=220;" >
     </ div >     
   < hr />
   < h4 > 使用随机数初始化SelectBox </ h4 >
   < input  type ="button"  value ="Init"  onclick ="initSelectBox()" />   < input  type ="checkbox"  name ="chkClear" /> clear
   < hr />
   < h4 > 添加option项 </ h4 >
   < input  type ="button"  value ="create"  onclick ="addOption()" />
   < hr />
   < h4 > 删除option项 </ h4 >
   < input  type ="button"  value ="delete"  onclick ="removeOption(colls.length-1)" />
  </ BODY >

转载于:https://www.cnblogs.com/lhyun/p/3342693.html