50、Web表单与富文本编辑技术详解

Web表单与富文本编辑技术详解

1. 选择框操作

1.1 移除选择框选项

可以通过重复移除选择框的第一个选项来移除所有选项，示例代码如下：

selectbox.remove(0);

此函数会不断移除选择框的第一个选项，由于移除第一个选项会自动将其他选项上移一位，所以最终会移除所有选项。

1.2 移动和重新排序选项

在DOM出现之前，将选项从一个选择框移动到另一个选择框是一个相当繁琐的过程，需要先从第一个选择框移除选项，再创建一个具有相同名称和值的新选项，最后将新选项添加到第二个选择框。而使用DOM方法，可以直接使用 appendChild() 方法将一个选项从第一个选择框移动到第二个选择框。示例代码如下：

var selectbox1 = document.getElementById("selLocations1");
var selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);

移动选项和移除选项类似，都会重置每个选项的索引属性。重新排序选项也很类似，使用DOM方法是最好的实现方式。要将一个选项移动到选择框中的特定位置， insertBefore() 方法最为合适，不过 app