javascript基础从小白到高手系列六百七十五：添加选项

可以使用JavaScript 动态创建选项并将它们添加到选择框。首先，可以使用DOM方法，如下所示：
let newOption = document.createElement(“option”);
newOption.appendChild(document.createTextNode(“Option text”));
newOption.setAttribute(“value”, “Option value”);
selectbox.appendChild(newOption);
以上代码创建了一个新的元素，使用文本节点添加文本，设置其value 属性，然后将其添加到选择框。添加到选择框之后，新选项会立即显示出来。
另外，也可以使用Option 构造函数创建新选项，这个构造函数是DOM出现之前就已经得到浏览
器支持的。Option 构造函数接收两个参数：text 和value，其中value 是可选的。虽然这个构造函
数通常会创建Object 的实例，但DOM 合规的浏览器都会返回一个元素。这意味着仍然可
以使用appendChild()方法把这样创建的选项添加到选择框。比如下面的例子：
let newOption = new Option(“Option text”, “Option value”);
selectbox.appendChild(newOption); // 在IE8 及更低版本中有问题
这个方法在除IE8 及更低版本之外的所有浏览器中都没有问题。由于实现问题，IE8 及更低版本在
这种情况下不能正确设置新选项的文本。
另一种添加新选项的方式是使用选择框的add()方法。DOM 规定这个方法接收两个参数：要添加
的新选项和要添加到其前面的参考选项。如果想在列表末尾添加选项，那么第二个参数应该是null。
IE8 及更早版本对add()方法的实现稍有不同，其第二个参数是可选的，如果要传入则必须是一个索引
值，表示要在其前面添加新选项的选项。DOM 合规的浏览器要求必须传入第二个参数，因此在跨浏览
器方法中不能只使用一个参数（IE9 是符合DOM规范的）。此时，传入undefined 作为第二个参数可
以保证在所有浏览器中都将选项添加到列表末尾。下面是一个例子：
let newOption = new Option(“Option text”, “Option value”);
selectbox.add(newOption, undefined); // 最佳方案
以上代码可以在所有版本的IE 及DOM 合规的浏览器中使用。如果不想在最后插入新选项，则应该
使用DOM 技术和insertBefore()。
移除选项
与添加选项类似，移除选项的方法也不止一种。第一种方式是使用DOM 的removeChild()方法
并传入要移除的选项，比如：
selectbox.removeChild(selectbox.options[0]); // 移除第一项
第二种方式是使用选择框的remove()方法。这个方法接收一个参数，即要移除选项的索引，比如：
selectbox.remove(0); // 移除第一项
最后一种方式是直接将选项设置为等于null。这同样也是DOM 之前浏览器实现的方式。下面是
一个例子：
selectbox.options[0] = null; // 移除第一项
要清除选择框的所有选项，需要迭代所有选项并逐一移除它们，如下面例子所示：
function clearSelectbox(selectbox) {
for (let option of selectbox.options) {
selectbox.remove(0);
}
}
这个函数可以逐一移除选择框中的每一项。因为移除第一项会自动将所有选项向前移一位，所以这
样就可以移除所有选项。