JS操作select下拉框动态变动(创建/删除/获取)

时间：2021-03-10 09:23:32|栏目：JavaScript代码|点击：次

1.动态创建select

 
function createSelect(){ 
 
var mySelect = document.createElement_x("select"); 
 
mySelect.id = "mySelect"; 
 
document.body.appendChild(mySelect); 
 
}

2.添加选项option

复制代码代码如下:

 
function addOption(){ 
 
//根据id查找对象， 
 
var obj=document.getElementByIdx_x('mySelect'); 
 
//添加一个选项 
 
obj.add(new Option("文本","值")); 
 
}

3.删除所有选项option

复制代码代码如下:

 
function removeAll(){ 
 
var obj=document.getElementByIdx_x('mySelect'); 
 
obj.options.length=0; 
 
}

4.删除一个选项option

复制代码代码如下:

 
function removeOne(){ 
 
var obj=document.getElementByIdx_x('mySelect'); 
 
//index,要删除选项的序号，这里取当前选中选项的序号 
 
var index=obj.selectedIndex; 
 
obj.options.remove(index); 
 
}

5.获得选项option的值

复制代码代码如下:

 
var obj=document.getElementByIdx_x('mySelect'); 
 
var index=obj.selectedIndex; //序号，取当前选中选项的序号 
 
var val = obj.options[index].value;

6.获得选项option的文本

复制代码代码如下:

 
var obj=document.getElementByIdx_x('mySelect'); 
 
var index=obj.selectedIndex; //序号，取当前选中选项的序号 
 
var val = obj.options[index].text;

7.修改选项option

复制代码代码如下:

 
var obj=document.getElementByIdx_x('mySelect'); 
 
var index=obj.selectedIndex; //序号，取当前选中选项的序号 
 
var val = obj.options[index]=new Option("新文本","新值");

8.删除select

复制代码代码如下:

 
function removeSelect(){ 
 
var mySelect = document.getElementByIdx_x("mySelect"); 
 
mySelect.parentNode.removeChild(mySelect); 
 
}

上一篇：Ajax带提示的验证表单实例

栏目：JavaScript代码

下一篇：微信小程序如何获取地址

本文标题：JS操作select下拉框动态变动(创建/删除/获取)

本文地址：http://www.codeinn.net/misctech/77665.html

更多JavaScript代码

JavaScript代码

JS操作select下拉框动态变动(创建/删除/获取)

阅读排行

推荐教程