select标签元素 操作option方法的一些细节

<form name="form1" action="" method="">
<select name="select1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>

[color=blue]var select1 = document.form1.select1;[/color]

[b]/********** 清空所有option **********/[/b]

// 一个很取巧的方法，兼容所有浏览器 :wink: ：
select1.length = 0;


[b]/********** 删除一个option **********/[/b]

// 在options对象上操作，FF会报错——没有该方法，其他浏览器则可以正常操作：
select1.options.remove(0)

// 兼容的标准方法是在select上操作 :idea: ：
[color=green]select1.remove(0)[/color]


[b]/********** 添加一个option **********/[/b]

// DOM方式新增一个option
var opt = document.createElement("option");
opt.text = "这是一个新增的选项";
opt.value = "newAdd1";
// js对象方式新增一个option
var opt = new Option("这是一个新增的选项", "newAdd1");

// 在select上操作，FF会报错，safari不能插入正确的索引位置，IE和opera则可以正确操作：
select1.add(opt, 0)
// 原来FF中，select元素的add方法的第二个参数必须为一个option，这一点和appendChild方法很相似，safari虽非必须，却不能正确操作索引。
// 但经过修改后，IE无法正常操作——也未报错，其他浏览器则可以正确操作
select1.add(opt, select1[0])

// 兼容的标准方法是在options对象上操作 :idea: ：
[color=green]select1.options.add(opt, 0)[/color]

[color=red]注意：[/color]
当add(opt, 0)方法的第二个参数是在当前的option索引数范围内，则插入该参数索引的位置，原来的当前及之后索引的option则依次向后位移；
若第二个参数大于原option索引数范围，则视同插入原option.length的位置

[b]// 如果你是在原option索引数范围后追加，再介绍一个偷巧的方式[/b] :wink: ：

select1.length = 4;
select1[3] = opt;

// 这种方式咋一看没什么特别的，但你可以像以下这样操作，创建并追加一个option：

select1.length = 4;
select1[3].text = "这是一个新增的选项";
select1[3].value = "newAdd1";

// 并且，你可以根据需要设置select1.length的长度，迭代如此创建追加

// [color=red]关键是：[/color]设置select1.length的长度后，浏览器会自动生成补位的option，采用这种属性赋值方法，速度要比上两种方法快上好几倍，不信你试试 :arrow: