<!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 + "， 选项文本：" + result[j].text + "， 选项的值：" + result[j].value + "; " } 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>