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

【转】javascript操作Select标记中options集合的更多相关文章

  1. 转 JavaScript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

    收藏一下 1.判断select选项中 是否存在Value=”paraValue”的Item2.向select选项中 加入一个Item3.从select选项中 删除一个Item4.删除select中选中 ...

  2. Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

    1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除selec ...

  3. javascript操作select元素一例

    熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮. 当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重 ...

  4. javaScript操作select

    注意:Option中的O是要大写的,不然语法报错 1.动态创建select       function createSelect(){ var mySelect = document.createE ...

  5. JavaScript操作select下拉框选项移动

    运行结果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  6. Jquery操作select选项集合,判断集合中是否存在option

    转载:http://www.cnblogs.com/pepcod/archive/2012/07/03/JavaScript.html Query获取Select选择的Text和Value: 语法解释 ...

  7. JS对select动态添加options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  8. jq操作select集合

    jq操作select集合 时间:2012年12月07日分类:Javascript 最近一段时间发现,老是要跟select,option相关的东西打交道,而且有的时候还会搞错,于是,抽了一点时间整理了一 ...

  9. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

随机推荐

  1. SQLServer 2012 Always on配置全过程

    AlwaysOn取数据库镜像和故障转移集群之长.AlwaysOn不再像故障转移集群那样需要共享磁盘,从而主副本和辅助副本可以更容易的部署到不同的地理位置:AlwaysOn还打破了镜像只能1对1的限制, ...

  2. 监测元素resize

    前言 近来有需求要做分页,听起来可能有点Low. 所以我要把Low的事情做得有点逼格. 分页本身没啥,但是数据量起来了,比如十万. 要是不做点处理, 那你的页面估计爽得很,机器也爽得很. 放心,我不会 ...

  3. vmware 虚机NAT模式，局域网可访问

    本地VMware虚拟机,网络模式为NAT,现在需要局域网其他电脑通过ssh连接这台VMware虚拟机 宿主机地址:192.168.3.26 VMware虚拟机地址:192.168.239.137 局域 ...

  4. POJ 2184 Cow Exhibition 奶牛展（01背包，变形）

    题意:有只奶牛要证明奶牛不笨,所以要带一些奶牛伙伴去证明自己.牛有智商和幽默感,两者可为负的(难在这),要求所有牛的智商和之 / 幽默感之和都不为负.求两者之和的最大值. 思路:每只牛可以带或不带上, ...

  5. LibreOJ #2003. 「SDOI2017」新生舞会

    内存限制:256 MiB 时间限制:1500 ms 标准输入输出 题目类型:传统 评测方式:文本比较 上传者: 匿名 01分数规划(并不知道这是啥..) km或费用流(并不会)验证 屠龙宝刀点击就送 ...

  6. Python 生成器和协程

    Python3 迭代器与生成器 迭代器 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访 ...

  7. 【动态规划】bzoj1705: [Usaco2007 Nov]Telephone Wire 架设电话线

    可能是一类dp的通用优化 Description 最近,Farmer John的奶牛们越来越不满于牛棚里一塌糊涂的电话服务 于是,她们要求FJ把那些老旧的电话线换成性能更好的新电话线. 新的电话线架设 ...

  8. NOIP2018 - 暑期博客整理

    暑假写的一些博客复习一遍.顺便再写一遍或者以现在的角度补充一点东西. 盛暑七月 初涉基环外向树dp&&bzoj1040: [ZJOI2008]骑士 比较经典的基环外向树dp.可以借鉴的 ...

  9. Windows7设置局域网文件共享

    首先要实现共享必须设置共享的机器与访问共享的机器在同一个工作组中. 右键桌面上的计算机图标=>属性 如果不一样的话,就需要点击[更改设置] 右键要共享的文件或者文件夹,点击[共享]打开共享标签: ...

  10. Ansible的使用和模块化深入

    Ansible配置 配置文件:/etc/ansible/ansible.cfg [default] 默认配置 inventory = /etc/ansible/hosts主机清单 library = ...