javasript 操作select中option的常用方法_js弹窗对话框

当前位置：首页 > 脚本编程 > javascript实例 > js弹窗对话框 > 正文

javasript 操作select中option的常用方法: 发布时间：2020-08-05编辑：脚本学堂

本文介绍下，使用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.jb200.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 移动和重排option选项的方法
 JavaScript 移除option选项的方法
 JavaScript 选择option选项的方法
 JavaScript 添加option选项的方法
 js 添加、修改、删除select中option元素的实现代码
 js动态添加与删除 select option的代码
 js获取select下拉标签中option的属性值
 js删除select下拉列表框中option选项的多种方法(附代码)
js移动(增加删除)select option的实现代码
 js 控制select下拉列表框中option选项的上下移动
 Js动态添加select的option选项的代码
 javascript操作Select options集合的实例介绍
 JS动态添加与删除option选项的代码
 js页面跳转 option location页面跳转的代码实例

上一篇：js获取select下拉标签中option的属性值
下一篇：Javascript如何获取select的选中值和选中文本

与 javasript 操作select中option的常用方法有关的文章

本文标题：javasript 操作select中option的常用方法
本页链接：http://www.jb200.com/article/8567.html

浏览排行

栏目分类

热点文章

javasript 操作select中option的常用方法