`

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

    博客分类：
  • Java
JavaScript.net 
阅读更多

 


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>
检测是否有选中
if(objSelect.selectedIndex > -1) {
//说明选中
} else {
//说明没有选中
}

删除被选中的项
objSelect.options[objSelect.selectedIndex] = null;

增加项
objSelect.options[objSelect.length] = new Option("你好","hello");

修改所选择中的项
objSelect.options[objSelect.selectedIndex] = new Option("你好","hello");

得到所选择项的文本
objSelect.options[objSelect.selectedIndex].text;

得到所选择项的值
objSelect.options[objSelect.selectedIndex].value;

详细出处参考：http://www.jb51.net/article/16240.htm

分享到：
| Select 动态添加节点
评论
发表评论

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

相关推荐

    javascript操作Select标记中options集合

    这篇博客“javascript操作Select标记中options集合”深入探讨了如何利用JavaScript动态地管理和操作这些选项。以下是关于这个主题的一些关键知识点： 1. **DOM操作**：在JavaScript中，我们可以使用DOM（Document ...

    JavaScript宝典 js开发

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

    js中使用标签

    - **示例应用**：在`doLoad`函数中，通过`document.getElementById('dpselect')`获取了ID为`dpselect`的`&lt;select&gt;`元素，并使用`options.add()`方法动态添加选项。 ### 拓展知识点 #### 4. JSP中的EL表达式 - **...

    HighchartsAPI中文翻译(表格版)

    该选项不能直接在单个图表中使用，需通过`Highcharts.setOptions`方法来设置全局配置。 ```javascript Highcharts.setOptions({ global: { useUTC: false } }); ``` - **labels**：标签选项，用于图表上的...

    正则表达式

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

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

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

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

    最后，Tabs API 提供了一系列的方法来控制 Tabs 组件的行为，例如，`options` 和 `tabs` 方法分别用来获取 Tabs 的配置项和所有的面板页，`resize` 方法用来调整容器的尺寸并重新布局。`getTab` 和 `getSelected` ...

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