教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 JavaScript 移动和重排option选项的方法

JavaScript 移动和重排option选项的方法

发布时间:2015-01-27   编辑:jiaochengji.com
本文介绍下,javascript实现移除与重排option选项的方法,有需要的朋友参考下吧。

在javascript中,使用DOM的appendChild()方法,可以将第一个选择框中的选项直接移动到第二个选择框中。
而使用DOM的appendChild()方法,可以将第一个选择框中的选项直接移动到第二个选择框中。

如果为appendChild()方法传入一个文档中已有的元素,那么就会先从该元素的父节点移除它,再把它添加到指定的位置。
以下代码,可以将第一个选择框中的第一个选项移动到第二个选择框中的过程:
 

复制代码 代码示例:

var selectbox1 = document.getElementById("selLocation1");
var selectbox2 = document.getElementById("selLocation2");

selectbox2.appendChild(selectbox1.options[0]);

移动选项与移除选项有一个共同指出,即会重置每一个选项的index属性。
重排选线次序的过程也十分相似,最好的方式仍然是使用DOM方法。
要将选择框中的某一项移动到特定位置,最合适的DOM方法就是insertBefore();
appendChild()方法值适用于将选项添加到选择框的最后。
在选择框中向前移动一个选项的位置,例如:
 

复制代码 代码示例:
var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);

首先,选择了要移动的选项,然后将其插入到排在它前面的选项之前。
实际上,第二行代码对除了第一个选项之外的其它选项是通用的。

类似的,将选择框中的选项向后移动一个位置:
 

复制代码 代码示例:
var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index+2]);

以上代码适用于选择框中的所有选项,包括最后一个选项。
IE7存在一个页面重绘问题,有时会导致使用DOM方法重排的选项,无法马上正确显示。

>>>

您可能感兴趣的文章:
JavaScript 移动和重排option选项的方法
javascript操作Select options集合的实例介绍
JavaScript 移除option选项的方法
select 联动菜单实现代码
jquery sortable的拖动方法示例详解
CSS3的default伪类选择器使用详解
jquery动态添加option示例
JQuery 常用操作代码
jQuery select操作控制方法小结
Jquery获取Select下拉框中Text与Value的方法详解

[关闭]
~ ~