(转载)javascript操作Select标记中options集合

[ 2007-8-6 17:03:00 | By: ibrahim ] 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 >