可以使用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);
}
}
这个函数可以逐一移除选择框中的每一项。因为移除第一项会自动将所有选项向前移一位,所以这
样就可以移除所有选项。
javascript基础从小白到高手系列一千四百六十五:添加选项
最新推荐文章于 2024-08-18 10:54:05 发布