多选框数据迁移示例-CSDN博客

本文链接：https://blog.csdn.net/wenzhui55/article/details/5731882

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>multiple select</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
    input{margin:5px;width:30px;}
</style>

</HEAD>

<BODY>
    <div id="container" name="container" style="width:300px;text-align:center;">
        <div id="left_select" name="left_select" style="float:left;">
            <form id="left_form" name="left_form">
                <select id="l_select" name="l_select" multiple size=10 style="width:100px;height:200px;">
                    <option value="hunan">湖南</option>
                    <option value="hubei">湖北</option>
                    <option value="guangdong">广东</option>
                    <option value="guangxi">广西</option>
                    <option value="henan">河南</option>
                    <option value="hebei">河北</option>
                </select>
            </form>
        </div>

        <div id="right_select" name="right_select" style="float:right;width:180px;">
            <span id="button" name="button" style="width:50px;float:left;text-align:left;line-height:30px;margin-left:15px;">
                <form >
                    <input type="button" value=">" οnclick="sigle_remove(document.forms[0].l_select,document.forms[2].r_select)"/><br>
                    <input type="button" value=">>" οnclick="mul_remove(document.forms[0].l_select,document.forms[2].r_select)"/><br>
                    <input type="button" value="<" οnclick="sigle_remove(document.forms[2].r_select,document.forms[0].l_select)"/><br>
                    <input type="button" value="<<" οnclick="mul_remove(document.forms[2].r_select,document.forms[0].l_select)"/><br>
                    <input type="button" value=">>>" οnclick="all_remove(document.forms[0].l_select,document.forms[2].r_select)"/><br>
                    <input type="button" value="<<<" οnclick="all_remove(document.forms[2].r_select,document.forms[0].l_select)"/>
                </form>
            </span>
            <form id="right_form" name="right_form" style="float:right;">
                <select id="r_select" name="r_select" multiple size=10 style="width:100px;height:200px;">

                </select>
            </form>
        </div>

    </div>
<script type="text/javascript">


    var right = document.forms[2].r_select.options.length=0;

    //单个移动
    function sigle_remove(from,to){

        var index = from.selectedIndex;
        if( index==-1 ){

            alert("请选择一项");

        }else{

            var value = from.options[index].value;
            var text = from.options[index].text;
            to.options[(to.length)] = new Option(text,value);
            from.options[index]=null;
        }

    }

    //多个移动
    function mul_remove(from,to){

        var text ;
        var value ;
        var length = from.length;
        var tempArray = new Array();
        if( from.selectedIndex==-1 ){
            alert("至少选择一项");
        }else{
            for( var i = 0 ; i<length;i++){

                if(from.options[i].selected){
                    value = from.options[i].value;
                    text = from.options[i].text;
                    to.options[to.length] = new Option(text,value);
                }else{
                    value = from.options[i].value;
                    text = from.options[i].text;
                    tempArray[tempArray.length]= new Option(text,value);
                }
            }

            from.options.length=0;
            for(var j = 0 ; j<tempArray.length;j++ ){

                from.options[from.options.length] = tempArray[j];
            }
        }
    }

    //全部移动
    function all_remove(from,to){

        var index = from.selectedIndex;
        var value ;
        var length = from.length;
        //alert(length);
        var text ;
        for( var i = 0 ; i< length;i++){

                value = from.options[i].value;
                text = from.options[i].text;
                to.options[to.length] = new Option(text,value);

        }

        for( var i = length-1 ; i>=0;i--){

            from.options[i]=null;

        }
    }
</script>

</BODY>
</HTML>

网页标签（tab）效果