網頁標籤（tab）效果

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

        <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=">" onclick="sigle_remove(document.forms[0].l_select,document.forms[2].r_select)"/><br>
                    <input type="button" value=">>" onclick="mul_remove(document.forms[0].l_select,document.forms[2].r_select)"/><br>
                    <input type="button" value="<" onclick="sigle_remove(document.forms[2].r_select,document.forms[0].l_select)"/><br>
                    <input type="button" value="<<" onclick="mul_remove(document.forms[2].r_select,document.forms[0].l_select)"/><br>
                    <input type="button" value=">>>" onclick="all_remove(document.forms[0].l_select,document.forms[2].r_select)"/><br>
                    <input type="button" value="<<<" onclick="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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

網頁標籤（tab）效果

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support