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