<!DOCTYPE html>
<html>
<head>
<title>选择框，移动和重排选项</title>
<script type="text/javascript" src="js/EventUtil.js"></script>
</head>
<body>
<form>
<select id="selLocations1" size="5" multiple="multiple" >
<option value="Sunnyvale, CA">0_Sunnyvale</option>
<option value="Los Angeles, CA">1_Los Angeles</option>
<option value="Mountain View, CA">2_Mountain View</option>
<option value="">3_China</option>
<option>4_Australia</option>
</select>
<select id="selLocations2" size="5" multiple="multiple"></select>
<p>
单击按钮，把当前选中项移动到其他选择框：
<br>
<input type="button" value=">>" id="btnMoveLeft">
<input type="button" value="<<" id="btnMoveRight">
</p>
</form>
<script type="text/javascript">
(function(){
var btnMoveLeft = document.getElementById("btnMoveLeft"),
btnMoveRight = document.getElementById("btnMoveRight"),
selectbox1 = document.getElementById("selLocations1"),
selectbox2 = document.getElementById("selLocations2"),
textbox = document.getElementById("txtIndex"),
result = new Array,
option = null,
selectedIndexRight = 0,
selectedIndexLeft = 0;
/* 获取选中项的值 */
function getItemMessage(){
var message = "";
for( var j = 0, jlen = result.length; j < jlen; j++ ){
message += "选项索引：" + result[j].index + "，\n选项文本：" + result[j].text + "，\n选项的值：" + result[j].value + ";\n\n"
}
console.log( message );
}
/* 获取选中项的值end */
/* 获取右侧选择框选中项索引 */
EventUtil.addHandler( selectbox2 , "change" ,function(even){
event = EventUtil.getEvent( event );
var target = EventUtil.getTarget( event );
selectedIndexRight = target.selectedIndex;
//console.log("右侧选择框事件查询的选中项：" + selectedIndexRight );
});
/* 获取右侧选择框选中项索引end */
/* 获取左侧选择框选中项索引 */
EventUtil.addHandler( selectbox1 , "change" ,function(even){
event = EventUtil.getEvent( event );
var target = EventUtil.getTarget( event );
selectedIndexLeft = target.selectedIndex;
//console.log("左侧选择框事件查询的选中项：" + selectedIndexLeft );
});
/* 获取左侧选择框选中项索引end */
/* 移动选中项 */
function moveOptionItem( target ){
for( var i = 0, len = result.length; i < len; i++ ){
if( target.id == "btnMoveLeft" ){
//selectbox2.appendChild( result[i] ); //添加到右侧选择框的最后面
//selectbox2.insertBefore( result[i] , selectbox2.options[result[i].index -1] ); //添加到右侧选择框，并向前移动一个选项的位置
//selectbox2.insertBefore( result[i] , selectbox2.options[result[i].index + 2] ); //添加到右侧选择框，并向后移动一个选项的位置
selectbox2.insertBefore( result[i] , selectbox2.options[ selectedIndexRight] ); //把左侧选中项，添加到右侧指定位置
}else if ( target.id == "btnMoveRight" ){
//selectbox1.appendChild( result[i] ); //添加到左侧选择框的最后面
//selectbox1.insertBefore( result[i] , selectbox1.options[result[i].index -1] ); //添加到左侧选择框，并向前移动一个选项的位置
//selectbox1.insertBefore( result[i] , selectbox1.options[result[i].index + 2] ); //添加到左侧选择框，并向后移动一个选项的位置
selectbox1.insertBefore( result[i] ,selectbox1.options[ selectedIndexLeft] ); //把右侧选中项，添加到左侧指定位置
}
}
result = [];
}
/* 移动选中项end */
/* >> 按钮事件 */
EventUtil.addHandler(btnMoveLeft, "click", function(event){
event = EventUtil.getEvent( event );
var target = EventUtil.getTarget( event );
for( var i = 0, len = selectbox1.options.length; i < len; i++ ){
option = selectbox1.options[i];
if( option.selected ){
result.push( option );
}
}
//getItemMessage(); //获取选中项的值
moveOptionItem( target ); //向右移动选中项
});
/* >> 按钮事件end */
/* << 按钮事件 */
EventUtil.addHandler(btnMoveRight, "click", function(event){
event = EventUtil.getEvent( event );
var target = EventUtil.getTarget( event );
for( var i = 0, len = selectbox2.options.length; i < len; i++ ){
option = selectbox2.options[i];
if( option.selected ){
result.push( option );
}
}
//getItemMessage(); //获取选中项的值
moveOptionItem(target ); //向左移动选中项
});
/* << 按钮事件end */
})();
</script>
</body>
</html>
