Hiya Guys,

Its been long since i posted here on “DigiMantra”. Been really busy in my office and events,conferences etc. As I love to write code/tutorials here so I am back :P

This time I am gonna show you how can you swap elements from one select html element to another.

Demo



Here is the source of the code, just copy & paste the following code blocks into any html file and render in the browser. Should be running fine.

<script>
    var box2;
    var box1;
 
    function generateRef(b1,b2)
    {
        box1=document.getElementById(b1);
        box2=document.getElementById(b2);
 
 
    }
    function appendOne(to,from)
    {
 
        generateRef(to,from);
        if(box1.options.selectedIndex<0)
            return false;
        var val_box1=box1.options[box1.selectedIndex].value;
        var text_box1=box1.options[box1.selectedIndex].text;
        //appends options from box1 to box2
        box2.options[box2.options.length]=new Option(text_box1,val_box1,false,false);
        //removes options from box1
        box1.options[box1.selectedIndex]=null;
 
    }
</script>
<table border="0" cellspacing="3" cellpadding="5">
 
        <tr>
            <td><select name="box1" id="box1" size="5" multiple="multiple">
    <option value="1">php</option>
    <option value="2">ruby</option>
    <option value="3">rails</option>
    <option value="4">java</option>
    <option value="5">.net</option>
</select></td>
 <td><input type="button" value="Move Right" onclick="appendOne('box1','box2');return false;" /><br/><input type="button" value="Move Left" onclick="appendOne('box2','box1');return false;" /></td>
            <td><select name="box2" id="box2" size="5" multiple="multiple">
    <option value="1">css</option>
    <option value="2">javascript</option>
    <option value="3">html</option>
 
</select></td>
        </tr>
 
</table>

Hope this helps !!

Cheers !!
Sachin Khosla

Delivered by FeedBurner

Share this Post