如何从内部的数据库表列表中传输选定的表 <select></select> 形成另一种形式 <select></select> 形成

Question

This is my current code:

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

How can I transfer a selected table from the left dropdownlist to the right, or vice versa?

Answer 1

I have created a Fiddle with what I think you are looking for. Using jQuery is very simple to do it.

$(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();
        });
    });

});