在下拉选择列表时，我们经常要对其中的选项进行操作，例如添加选项、删除选项、移动和重新排序等操作，接下来由南昌网站建设公司百恒网络前端开发工程师依次介绍具体操作办法。

添加选项

可以使用 JavaScript 动态创建选项，并将它们添加到选择框中。添加选项的方式有很多，第一种方 式就是使用如下所示的 DOM方法。

var newOption = document.createElement("option");

newOption.appendChild(document.createTextNode("Option text")); newOption.setAttribute("value", "Option value");

selectbox.appendChild(newOption);

以上代码创建了一个新的元素，然后为它添加了一个文本节点，并设置其 value 特性， 后将它添加到了选择框中。添加到选择框之后，用户立即就可以看到新选项。

第二种方式是使用 Option 构造函数来创建新选项，这个构造函数是 DOM出现之前就有的，一 直遗留到现在。Option 构造函数接受两个参数：文本(text)和值(value);第二个参数可选。 虽然这个构造函数会创建一个 Object 的实例，但兼容 DOM的浏览器会返回一个元素。 换句话说，在这种情况下，我们仍然可以使用 appendChild()将新选项添加到选择框中。来看下面 的例子。

var newOption = new Option("Option text", "Option value");

selectbox.appendChild(newOption); //在 IE8及之前版本中有问题

这种方式在除 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()方法。

就和在 HTML中一样，此时南昌网络公司前端开发工程师提配大家也不一定要为选项指定值。换句话说，只为 Option 构造函数传入一个参数(选项的文本)也没有问题。

移除选项

与添加选项类似，移除选项的方式也有很多种。首先，可以使用 DOM 的 removeChild()方法， 为其传入要移除的选项，如下面的例子所示：

selectbox.removeChild(selectbox.options[0]); //移除第一个选项

其次，可以使用选择框的 remove()方法。这个方法接受一个参数，即要移除选项的索引，如下面 的例子所示：

selectbox.remove(0); //移除第一个选项

后一种方式，就是将相应选项设置为 null。这种方式也是 DOM 出现之前浏览器的遗留机制。 例如：

selectbox.options[0] = null; //移除第一个选项

要清除选择框中所有的项，需要迭代所有选项并逐个移除它们，如下面的例子所示：

function clearSelectbox(selectbox){

for(var i=0, len=selectbox.options.length; i < len; i++){

selectbox.remove(i);

}

}

这个函数每次只移除选择框中的第一个选项。由于移除第一个选项后，所有后续选项都会自动向上 移动一个位置，因此重复移除第一个选项就可以移除所有选项了。

移动和重排选项

在 DOM标准出现之前，将一个选择框中的选项移动到另一个选择框中是非常麻烦的。整个过程要 涉及从第一个选择框中移除选项，然后以相同的文本和值创建新选项，后再将新选项添加到第二个选 择框中。而使用 DOM 的 appendChild()方法，就可以将第一个选择框中的选项直接移动到第二个选 择框中。我们知道，如果为 appendChild()方法传入一个文档中已有的元素，那么就会先从该元素的 父节点中移除它，再把它添加到指定的位置。下面的代码展示了将第一个选择框中的第一个选项移动到 第二个选择框中的过程。

var selectbox1 = document.getElementById("selLocations1");

var selectbox2 = document.getElementById("selLocations2");

selectbox2.appendChild(selectbox1.options[0]);

移动选项与移除选项有一个共同之处，即会重置每一个选项的 index 属性。

重排选项次序的过程也十分类似，好的方式仍然是使用 DOM方法。要将选择框中的某一项移动 到特定位置，合适的 DOM 方法就是 insertBefore();appendChild()方法只适用于将选项添加 到选择框的后。要在选择框中向前移动一个选项的位置，可以使用以下代码：

var optionToMove = selectbox.options[1];

selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);

以上代码首先选择了要移动的选项，然后将其插入到了排在它前面的选项之前。实际上，第二行代 码对除第一个选项之外的其他选项是通用的。类似地，可以使用下列代码将选择框中的选项向后移动一 个位置。

var optionToMove = selectbox.options[1];

selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index+2]);

以上代码适用于选择框中的所有选项，包括后一个选项。

IE7 存在一个页面重绘问题，有时候会导致使用 DOM 方法重排的选项不能马上 正确显示。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络 http://www.jxbh.cn/ 如转载请注明出处!