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 😛

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


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.

    var box2;
    var box1;
    function generateRef(b1,b2)
    function appendOne(to,from)
            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
<table border="0" cellspacing="3" cellpadding="5">
            <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>
 <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>

Hope this helps !!

Cheers !!
Sachin Khosla

Share this post: