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