<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:
<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: