其他分享
首页 > 其他分享> > 选择框脚本_移动/重排选项 P435

选择框脚本_移动/重排选项 P435

作者:互联网

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

 

标签:选项,EventUtil,P435,result,重排,selectbox2,selectbox1,event,target
来源: https://www.cnblogs.com/jiunie/p/15119061.html