(转载)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>
posted @ 2008-08-05 11:18  旭旭  阅读(2188)  评论(0编辑  收藏  举报