Javascript操作兩個select

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

上載者：User

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

前兩天要寫一個操作select的東西，因為急著交貨，隨便寫了一個操作LISTBOX的東西交上去了，
所有事件都是寫在伺服器端，覺得不是很好，今天重寫了一個，是伺服器端和用戶端互動的

前端只有一個資料繫結：

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                SelectBind();
            }
        }

        protected void SelectBind()
        {
            for (int i = 0; i < 20; i++)
                selectleft.Items.Add(new ListItem("Andy"+(i+1).ToString(),(i+1).ToString()));
        }

源：

<body>
<script type="text/javascript" language="javascript">
    //交換全部,參數為要交換的對象
    function TranAllOption(Obj1,Obj2)
    {
        if(Obj1.options.length <=0)
            { alert("沒有要移動的項！"); return;}
        while(Obj1.options.length >0)
        {
            Obj2.options.add(new Option(Obj1.options[0].text,Obj1.options[0].value));
            Obj1.remove(0);
        }
    }
    //交換部份,參數為要交換的對象
    function TranOption(Obj1,Obj2)
    {
        var show = true;
        for(var i=0;i<Obj1.options.length;i++)
        {
            if(Obj1.options[i].selected == true)
            {
                Obj2.options.add(new Option(Obj1.options[i].text,Obj1.options[i].value));
                Obj1.remove(i);
                i=i-1;
                show = false;
            }
        }
        if(show)
        {
            alert("請選擇要移動的項！");
        }
    }
    //上下移動
    function SwapOption(obj,index)
    {
        if(obj.selectedIndex < 0)
        {
            alert("請選擇要移動的項！");
            return;
        }
        if(index == -1)
        {
            if (obj.selectedIndex == 0)
            {
                alert("已經移動到頂了！");
                return;
            }
            else { obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)); return;}
        }
        else if(index == 1)
        {
            if (obj.selectedIndex == obj.options.length-1)
            {
                alert("已經移動到底了！"); return;
            }
            else { obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)); return; }
        }
    }
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <div>
        <table>
            <tr><td rowspan="4"><select runat="server" multiple="true" id="selectleft" style="border-style:solid; width:200px; height:300px;" ></select></td>
            <td><input id="Button1" type="button" value=">> 全部" onclick="TranAllOption(selectleft,selectright)" /></td>
            <td rowspan="4"><select runat="server" multiple="true" id="selectright" style="border-style:solid; width:200px; height:300px;" ></select></td>
            <td rowspan="2"><input id="Button5" type="button" value="上移" onclick="SwapOption(selectright,-1);" /></td></tr>
            <tr><td><input id="Button2" type="button" value="> 增加" onclick="TranOption(selectleft,selectright)" /></td></tr>
            <tr><td><input id="Button3" type="button" value="<< 全部" onclick="TranAllOption(selectright,selectleft)" /></td>
            <td rowspan="2"><input id="Button6" type="button" value="下移" onclick="SwapOption(selectright,1)" /></td></tr>
            <tr><td><input id="Button4" type="button" value="< 增加" onclick="TranOption(selectright,selectleft)" /></td></tr>
        </table>
    </div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>

本文章原先以中文撰寫並發佈於 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