JavaScript动态操作select下拉列表

2018-3-12 20:35| 作者: admin| 查看: 833| 评论: 0|来自: 蚂蚁部落

在实际应用中,往往要根据需要去创建一个select下拉列表,或者说需要动态的添加和删除一个option项,下面就通过简单的实例介绍一下如何实现此功能。

一.动态创建一个select下拉列表:

[JavaScript] 纯文本查看 复制代码
function createSelect(){ 
  var newSelect=document.createElement("select"); 
  newSelect.id="mySelect"; 
  document.body.appendChild(newSelect); 
}

以上代码能够网页中创建一个id属性值为myselect的select下拉菜单。

二.为select下拉菜单添加一个option项:

[JavaScript] 纯文本查看 复制代码
mySelect.add(new Option("文本","值"));

三.删除一个指定的option项:

[JavaScript] 纯文本查看 复制代码
newSelect.options.remove(index);

删除指定索引的option项。第一个option项的索引值为0。

四.删除所有的option项目:

[JavaScript] 纯文本查看 复制代码
obj.options.length=0;

将options对象集合的长度设置为0即可。

五.获得指定option的文本内容:

[JavaScript] 纯文本查看 复制代码
obj.options[index].text

以上代码可以获得指定索引值option选项的文本内容,index值是从0开始的。

六.获得指定option的值:

[JavaScript] 纯文本查看 复制代码
obj.options[index].value

以上代码可以获得指定索引值option选项的值,index值是从0开始的。

七.获得选中项的值:

[JavaScript] 纯文本查看 复制代码
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].value;

以上代码可以获得当前选中项的值。

八.修改指定的option项:

[JavaScript] 纯文本查看 复制代码
var val = obj.options[index]=new Option("新文本","新值");

以上代码可以膝盖指定索引值option选项的文本和值,index值是从0开始的。

九.删除一个select:

[JavaScript] 纯文本查看 复制代码
var mySelect = document.getElementById("mySelect"); 
mySelect.parentNode.removeChild(mySelect);

以上代码可以删除指定的select对象。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部