`
liuguofeng
  • 浏览: 449633 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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>

 

分享到：
| Spring事务配置的五种方式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript Select标记中options操作方法集合

    options.remove(index)方法移除options集合中的指定项； options(index)或options.item(index)可以通过索引获取options集合的指定项； javascript代码如下： var selectTag = null; //select标记 var OPTONLENGTH =...

    JavaScript宝典 js开发

    `document.forms[0].selectName.options[n].value`：获取下拉列表中指定选项的值。`n`通常是指`selectedIndex`，即用户当前选择的索引。 #### 三十、字符串操作 - 创建字符串：`var myString = new String("This ...

    js中使用标签

    在这个过程中，涉及到的技术主要包括JavaScript本身的DOM操作、服务器端技术（如JSP中的标签）以及两者之间的协作。本文将详细解析如何在JavaScript中使用标签，并通过一个具体的例子来展示其应用场景。 #### 标签...

    HighchartsAPI中文翻译(表格版)

    - **marker**：标记，用于定义图表中数据点的标记样式。 - **states**：数据点的状态，包括`hover`鼠标滑过点的样式和`select`选中点的样式。 - **subtitle**：副标题，用于设置图表的副标题。 - **title**：标题，...

    easyui tab

    在EasyUI中，Tab的使用非常直观，只需通过HTML标记和JavaScript脚本即可快速创建出具有切换效果的选项卡。下面我们将深入探讨EasyUI Tab的几个重要知识点： 1. **基本使用**： - 创建Tab：在HTML中，你可以通过`...

    正则表达式

    [xyz] 字符集(character set)，匹配这个集合中的任一一个字符(或元字符) [^xyz] 不匹配这个集合中的任何一个字符 [\b] 匹配一个退格符 \b 匹配一个单词的边界 \B 匹配一个单词的非边界 \cX 这儿，X是一个控制符，/\...

    jquery监控数据是否变化(修正版)

    在jQuery中，.data()方法用于在匹配的元素集合中的每个元素上存储与之相关的数据，或者返回某个特定元素关联的数据。本文利用此方法为每个需要监控的输入控件在首次聚焦时存储其初始值（initData），以便后续比较...

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI是一个基于jQuery的用户界面插件集合，它提供了一系列易于使用的界面组件，通过编写少量的代码，开发者就可以快速构建美观且功能丰富的web应用。在jQuery EasyUI框架中，Tabs组件是一个常用的选项卡...

    AngularJS学习第一篇 AngularJS基础知识

    6. `ng-options`：这个指令用于在`&lt;select&gt;`元素中创建一个下拉列表，并可以利用对象和数组循环来动态输出列表项。`ng-options`可以用来绑定一个数组或对象作为选项，并且能够提供更好的性能和更多的选项功能。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics