• 【转】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>
  • 相关阅读:
    接口
    多态
    static的用法
    Person类中多个构造方法和测试
    曹操外卖实现功能
    曹操外卖数据表设计
    java中 try catch finally和return联合使用时,代码执行顺序的小细节
    GenerationType四中类型
    spring boot
    VMware修改为静态ip
  • 原文地址:https://www.cnblogs.com/lhyun/p/3342693.html
Copyright © 2020-2023  润新知