JavaScript 添加option选项的方法

发布时间:2019-10-18编辑:脚本学堂
本文介绍下,在javascript添加表单option选项的方法,有需要的朋友,可以参考学习下。

使用javascript动态创建选项,并将它们添加到选择框中。

添加选项的方式分享如下,共本种方法。

方法一,使用DOM方法:
 

复制代码 代码示例:

var selectbox = document.getElementById("selLocation");
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");

selectbox.appendChild(newOption);
 

以上代码创建了一个新的<option>元素,然后为它添加了一个文本节点,并设置其value特性,最后将它添加到了选择框中。

方法二,使用Option构造函数来创建新选项,Option构造函数接受两个参数:文本(text)和值(value);
第二个参数可选。虽然这个构造函数会创建一个Object的实例,但兼容DOM的浏览器会返回一个<option>元素。
可以使用appendChild()将新选项加到选择框中。

例子:
 

复制代码 代码示例:
var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption);  //在IE中有问题
 

这种方式在除IE之外的浏览器中都可以使用。由于存在BUG,IE在这种方式下不能正确设置新选项的文本。

方法三,添加新选项的方式是使用选择框的add()方法。DOM规定这个方法接受两个参数:要添加的新选项将位于新选项之后的选项。如果项在列表最后添加一个选项,应该将第二个参数设置为null。在IE对add()方法的实现中,第二个参数是可选的,而且如果指定,该参数必须是新选项之后选项的索引。
兼容DOM的浏览器要求必须指定第二个参数,因此要像编写跨浏览器的代码,就不能值传入一个参数。这时候,为第二个参数传入undefined,就可以在所有浏览器中都将新选项插入到列表最后了。

例子:
 

复制代码 代码示例:
var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined);  //最佳方案
 

在IE和兼容DOM的浏览器中,以上代码均可正常使用。
如果希望将新选项添加到其它位置(不是最后一个),就应该使用标准的DOM技术和insertBefore()方法。

>>> 您可能感兴趣的文章:
JavaScript 移动和重排option选项的方法
JavaScript 移除option选项的方法
JavaScript 选择option选项的方法
js 添加、修改、删除select中option元素的实现代码
js动态添加与删除 select option的代码
javasript 操作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页面跳转的代码实例