教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 javasript 操作select中option的常用方法

javasript 操作select中option的常用方法

发布时间:2014-12-02   编辑:jiaochengji.com
本文介绍下,使用javascript操作select下拉列表中option的方法,都是一些比较常用的方法。有需要的朋友,参考下吧。

一、基础知识
 

var e = document.getElementById("selectId");
e.options = new Option("文本", "值");   
//创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option>。
//options是一个数组,里面可存放多个<option value="值">文本</option>标签。

1、options数组的属性:
length 长度属性
selectedIndex 当前被选中的文本的索引值,此索引值是内存自动分配的(0,1,2,3....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值...)

2、单个option的属性(即obj.options[obj.selectedIndex]是指定的某个<option>标签):
text     返回/指定文本
value    返回/指定文本,与<option value="...">一致
index    =返回下标
selected   =返回/指定该对象是否被选中,指定true or false可动态改变选中项
defaultSelected    返回该对象默认是否被选中,true/false

3、option的方法:
增加一个<option>标签   obj.options.add(new("文本", "值"))
删除一个<option>标签   obj.options.remove(obj.selectedIndex);
获取一个<option>标签   obj.options[obj.selectedIndex].text ;
修改一个<option>标签   obj.options[obj.selectedIndex] = new Option("新文本", "值") ;
删除所有<option>标签   obj.options.length = 0 ;
获取一个<option>标签的值 obj.options[obj.selectedIndex].value ;

注意:
obj.option中的option不需要大写
new Option中的option需要大写

二、具体应用举例。

1,检测是否有选中
 

复制代码 代码示例:
if(objSelect.selectedIndex > -1) {
//说明选中
} else {
//说明没有选中
}

2,动态创建select
 

复制代码 代码示例:
function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

3,添加选项option
 

复制代码 代码示例:

function addOption(){
//根据id查找对象,www.jiaochengji.com
var obj=document.getElementById('mySelect');

//添加一个选项
obj.add(new Option("文本","值"));
}

4,删除所有选项option
 

复制代码 代码示例:
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}

5,删除一个选项option
 

复制代码 代码示例:

function removeOne(){
var obj=document.getElementById('mySelect');

//index,要删除选项的序号,这里取当前选中选项的序号

var index=obj.selectedIndex;
obj.options.remove(index);
}

6,获得选项option的值
 

复制代码 代码示例:
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;

7,获得选项option的文本
 

复制代码 代码示例:
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;

8,修改选项option
 

复制代码 代码示例:
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");

9,删除select
 

复制代码 代码示例:
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

>>>

您可能感兴趣的文章:
javascript操作Select options集合的实例介绍
javasript 操作select中option的常用方法
Jquery Select操作方法集合脚本之家特别版
jQuery操作select option选项(增加 删除 修改)
JQuery 常用操作代码
jquery操作select中option选项的方法汇总
JS操作SELECT表单方法收集(赋默认值,取值,增,删等)
Chosen 基于jquery的选择框插件使用方法
jquery操作select option 的代码小结
Javascript如何获取select的选中值和选中文本

[关闭]
~ ~