javascript操作Select标记中options集合

来源：互联网发布：大数据时代的电子商务编辑：程序博客网时间：2024/04/27 19:50

先来看看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;
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>