JavaScript动态操作select下拉列表

JavaScript动态操作select下拉列表属于前端实例代码，有关更多实例代码大家可以查看。

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

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

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

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

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

mySelect.add(new Option("文本","值"));

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

newSelect.options.remove(index);

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

四.删除所有的option项目:

obj.options.length=0;

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

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

obj.options[index].text

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

六.获得指定option的值:

obj.options[index].value

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

七.获得选中项的值:

var index=obj.selectedIndex; //序号，取当前选中选项的序号 
var val = obj.options[index].value;

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

八.修改指定的option项:

var val = obj.options[index]=new Option("新文本","新值");

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

九.删除一个select:

var mySelect = document.getElementById("mySelect"); 
mySelect.parentNode.removeChild(mySelect);

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