Tejas P Mehta

Few days back i faced one problem. I had to make one javascript in which there are two different select box and at time of page load one select box is full with values while another is empty. With help of buttons or images selected values of box 1 will be transferred to box 2.

Initially i tried to find solution on internet but didn’t find appropriate solution, so decided to write my own javascript. And i have added addititional functionality of swapping of elements in select box 2.

First define two select box
Box 1 : named as sender
Box 2 : named as receiver

Define few values in Box 1.

Now make two different buttons which will transfer values from Box1 to Box2 and vice-verse.

After creation of Basic HTML we will now move to javascript code. Define javascript code in

head section of HTML. Here is code.

function addOption(theSel,theText,theValue){
var newOpt=new Option(theText,theValue);
var selLength=theSel.length;
theSel.options[selLength]=newOpt;
}
function deleteOption(theSel,theIndex){
var selLength=theSel.length;
if(selLength>0){
theSel.options[theIndex]=null;
}
}
function selAll() {
elem=document.getElementById('receiver');
varr=new Array();
for (d=0;d=0;i--){
if(theSelFrom.options[i].selected){
selectedText[selectedCount]=theSelFrom.options[i].text;
selectedValues[selectedCount]=theSelFrom.options[i].value;
deleteOption(theSelFrom,i);
selectedCount++;
}
}
for(i=selectedCount-1;i>=0;i--){
addOption(theSelTo,selectedText[i],selectedValues[i]);
}
selAll();
}
function swapOpt(shift) {
elem=document.getElementById('receiver');
ind=elem.selectedIndex;
if(ind!=-1) {
if(ind==0 && shift==-1){return false;}
if(ind==elem.length-1 && shift==1){return false;}
nind=ind+shift;
tval=elem.options[nind].value;
ttxt=elem.options[nind].text;
elem.options[nind].value=elem.options[ind].value;
elem.options[nind].text=elem.options[ind].text;
elem.options[ind].value=tval;
elem.options[ind].text=ttxt;
elem.selectedIndex=nind;
selAll();
}
}
function frmCheck() {
if(document.form1.tmps.value=="") {
alert("Please select input field(s)!");
return false;
}
}

To make this working properly i have provided HTML code also

  <form name="form1" method="post" onsubmit="return frmCheck();">
    <table class="form" cellpadding="3" cellspacing="1">
      <tr>
        <td><select size="10" style="width:80px;" name="sender" id="sender" 

ondblclick="moveOptions('sender','receiver')">
            <option value="1">Name 1</option>
            <option value="2">Name 2</option>
            <option value="3">Name 3</option>
            <option value="4">Name 4</option>
            <option value="5">Name 5</option>
          </select>
        </td>
        <td><input value="&#9658;" type="button" onclick="moveOptions('sender','receiver')" 

/>
          <br />
          <input  value="&#9668;" type="button" onclick="moveOptions('receiver','sender')" 

/>
        </td>
        <td><select size="10" style="width:80px;" id="receiver" name="receiver" 

ondblclick="moveOptions('receiver','sender')">
          </select>
          <input type="hidden" name="tmps" id="tmps" value="" />
        </td>
        <td valign="top"><input value="&#9650;" type="button" onclick="swapOpt(-1)" />
          <br />
          <input value="&#9660;" type="button" onclick="swapOpt(1)" />
        </td>
      </tr>
      <tr>
        <td colspan="4" align="center"><input class="inputBut" type="submit" value="Submit" 

/></td>
      </tr>
    </table>
  </form>

Here is working demo link.

If you like this article than please do comment.