熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

Jquery多選框互相內容交換的實例代碼

2022-06-13   來源: JSP教程 
這篇文章介紹了Jquery多選框互相內容交換的實例代碼有需要的朋友可以參考一下   復制代碼 代碼如下:

  
<head runat="server">
    <title>無標題頁</title>
    <script type="text/javascript" src="js/jqueryminjs"></script>
    <script type="text/javascript">
        $(document)ready(function(){
            // 把選擇項追加給對方
            $(#add)click(function(){
            var options=$(#select option:selected);
            var remove=optionsremove();
            removeappendTo("#select");
            });
            // 把所有項追加給對方
            $(#addAll)click(function(){
            var options=$(#select option);
            var remove=optionsremove();
            removeappendTo("#select");
            });
            // 把選擇項退回給對方
            $(#remove)click(function(){
            var options=$(#select option:selected);
            var remove=optionsremove();
            removeappendTo("#select");
            });
            // 把全部項退回給對方
            $(#removeAll)click(function(){
            var options=$(#select option);
            var remove=optionsremove();
            removeappendTo("#select");
            });
        });
    </script>
</head>
<body>
    <form id="form" runat="server">
    <div id="left">
        <select multiple="multiple" id="select" style="width:px;height:px">
        <option>選項</option>
        <option>選項</option>
        <option>選項</option>
        <option>選項</option>
        <option>選項</option>
        </select>
    </div>
    <div>
        <span id="add">選中項添加至右邊>></span><br />
        <span id="addAll">全部添加到右邊>></span>
    </div>
    <div id="right">
        <select multiple="multiple" id="select" style="width:px;height:px"></select>
    </div>
    <div>
        <span id="remove"><<選中項還原至左邊</span><br />
        <span id="removeAll"><<全部還原至左邊</span>
    </div>
    </form>
</body>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19909.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.