2013年9月4日 星期三

ListBox多選框實現多選選項左移、右移 (使用jQuery方式)


<html>
<head>
    <title>ListBox多選框實現多選選項左移、右移 (使用jQuery方式)</title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/JavaScript"></script>
    <script type="text/javascript">
        function add(listbox1, listbox2) {
            $('select[name=' + listbox1 + '] option:selected').appendTo('#' + listbox2);
        }
        function addall(listbox1, listbox2) {
            $('select[name=' + listbox1 + '] option').appendTo('#' + listbox2);
        }
        function remove(listbox1, listbox2) {
            $('select[name=' + listbox2 + '] option:selected').appendTo('#' + listbox1);
        }
        function removeall(listbox1, listbox2) {
            $('select[name=' + listbox2 + '] option').appendTo('#' + listbox1);
        }
    </script>
</head>
<body>
    <form id="form1">
        <table>
            <tr>
                <td>
                    <select size="4" name="lbItem1" multiple="multiple" id="lbItem1" class="listbox" style="width:150px;height:174px;">
                        <option value="BR">BR - 長榮航空</option>
                        <option value="CA">CA - 中國國際</option>
                        <option value="CI">CI - 中華航空</option>
                        <option value="CX">CX - 國泰航空</option>
                        <option value="EG">EG - 日亞航</option>
                        <option value="JL">JL - 日本航空</option>
                        <option value="KA">KA - 港龍航空</option>
                        <option value="KL">KL - 荷蘭航空</option>
                        <option value="MU">MU - 中國東方航空</option>
                        <option value="NX">NX - 澳門航空</option>
                        <option value="QF">QF - 澳洲航空</option>
                        <option value="SQ">SQ - 新加坡航空</option>
                        <option value="TG">TG - 泰國航空</option>
                    </select>
                </td>
                <td>
                    <input type="button" value=">" class="button" style="width: 50px;" onclick="add('lbItem1','lbItem2')" /><br />
                    <input type="button" value=">>" class="button" style="width: 50px;" onclick="addall('lbItem1','lbItem2')" /><br />
                    <input type="button" value="<" class="button" style="width: 50px;" onclick="remove('lbItem1','lbItem2')" /><br />
                    <input type="button" value="<<" class="button" style="width: 50px;" onclick="removeall('lbItem1','lbItem2')" /><br />
                </td>
                <td>
                    <select size="4" name="lbItem2" multiple="multiple" id="lbItem2" class="listbox" style="width:150px;height:174px;">
                    </select>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)