如何将选定的表从<select> </select>表单中的数据库表列表传输到另一个<select> </select>表单

Question

这是我目前的代码：

<div class="column" id="tbDiv">
    <p><b>TABLES</b></p>
    <select name="List of Tables" size="25" multiple id='table1' name='table1' title='List of Tables' class='inputbox'>
        <option>Tables will be listed here...</option></select>
</div> 
</td>

<td>
    <div class="column">                  
        <button onclick="myFunction1()" style="float:right; margin-right:0px;" id="submit1"><<</button>
        <button onclick="myFunction2()" style="float:right; margin-right:0px;" id="submit">>></button>  
     </div>
</td> 
<td>             
    <div class="column">
        <p><b>TABLE(S) TO SYNC</b></p>
        <select name="List of Tables" size="25" multiple name='table1' title='List of selected tables' name="List of Tables" size="20" class='inputbox'>
             <option>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </option>
        </select>
    </div>
</td>

如何将选定的表格从左侧下拉列表中转移到右侧，反之亦然？

Answer 1

我创建了一个Fiddle，我认为你正在寻找。使用jQuery非常简单。

$(document).ready(function(){

    $("#add").click(function(){
        $("#tables option:selected").each(function(){
           $(this).clone().appendTo("#tables_to_sync");
           $(this).remove();
        });
    });

    $("#remove").click(function(){
        $("#tables_to_sync option:selected").each(function(){
           $(this).clone().appendTo("#tables");
           $(this).remove();
        });
    });

});