Add,delete,move operations on list box using java script

Manimaddu
Posted by Manimaddu under JavaScript category on | Points: 40 | Views : 557
Hi ALL...
Few days back I have done the operations on list box by using simple html and java script. I want to share with you people.
Html Code to display buttons.and List boxes:

<html>
<head>
<script src="validation.js">
</script>
</head>
<body>
<table align="center" >
<tr>
<td class="style2">
<input type="textbox" id="txtAddCountry" />
</td>
<td class="style3">
<input type="button" id="btnAddCountry" value="Add Country" onClick="MoveItem('txtAddCountry','listCountry')"/>
</td>
<td class="style4">
<input type="button" id="btnRemoveCountry" value="Remove Country" onClick="listbox_remove('listCountry')"/>
</td>
<td class="style6">
<input type="button" id="btnAddSoap" value="Add Soap"
onClick="MoveItem('txtAddSoap','listSoap')"/>
</td>
<td class="style5">
<input type="button" id="btnRemoveSoap" value="Remove Soap" onClick="listbox_remove('listSoap')"/>
</td>
<td>
<input type="textbox" id="txtAddSoap">
</td>
</tr>
<tr>
<td rowspan="4">
<select name="s2" id="listCountry" width="100" size="6" multiple="multiple">
<option>India</option>
<option>U.S.A</option>
<option>SriLanka</option>
<option>Pakistan</option>
</select>

</td>
<td colspan="2" rowspan="4">
</td>
<td >
<input type="button" id="btnMoveRightTotal" value=" >> " onClick="listbox_moveacross('listCountry','listSoap')"/>
</td>
<td rowspan="4">
</td>
<td rowspan="4">
<select name="s1" id="listSoap" width="100" size="6" multiple="multiple">
<option>Himalaya</option>
<option>Rexona</option>
<option>Medimix</option>
<option>Lux</option>
</select>
</td>
</tr>
<tr>
<td class="style6">
<input type="button" id="btnMoveLeftTotal" value=" << " onClick="listbox_moveacross('listSoap','listCountry')" />
</td>
</tr>
<tr>
<td class="style6">
<input type="button" id="btnMoveRight" value=" > " onClick="SelectedItem('listCountry','listSoap')" />
</td>
</tr>
<tr>
<td class="style6">
<input type="button" id="btnMoveLeft" value=" < " onClick="SelectedItem('listSoap' , 'listCountry')" />
</td>
</tr>
</table>
</body>
</html>





Java script code for Adding data from text box to list box


function MoveItem(txtid,listid)
{
var Source = document.getElementById(txtid).value;
var Target = document.getElementById(listid);

if (Source != "")
{
var newOption = new Option();
newOption.text = Source;
newOption.value = Source;
Target.options[Target.length] = newOption;
document.getElementById("txtAddCountry").value="";
document.getElementById("txtAddSoap").value="";
}
else
alert("Enter The Text");
}



Java script code for move all data from one list box to another list box:



function listbox_moveacross(sourceID,destID)
{
var src=document.getElementById(sourceID);
var dest=document.getElementById(destID);

if(src.options.length==0)
alert("List Box empty");
for(var count=0;count<src.options.length;count++)
{
var option=src.options[count];
var newOption=document.createElement("option");
newOption.value=option.value;
newOption.text=option.text;
newOption.selected=true;
try
{
dest.add(newOption,null);
src.remove(count,null);
}
catch(error)
{
dest.add(newOption);src.remove(count);
}
count--;
}
}


java script code for move selected item from one list box to another list box:


function SelectedItem(sourceID,destID)
{
var src=document.getElementById(sourceID);
var dest=document.getElementById(destID);
if(src.options.length == 0)
{
alert("List Box Empty");
return false;
}
if(src.value.length == 0)
{
alert("please select an item");
return false;
}


for(var count=0;count<src.options.length;count++)
{
if(src.options[count].selected == true)
{
var option=src.options[count];
var newOption=document.createElement("option");
newOption.value=option.value;
newOption.text=option.text;
newOption.selected=true;
try
{
dest.add(newOption,null);
src.remove(count,null);
}
catch(error)
{
dest.add(newOption);
src.remove(count);
}
count--;
}
}
}


Java script code for remove selected items from list box:


function listbox_remove(sourceID) 
{
var src = document.getElementById(sourceID);
if(src.options.length == 0)
{
alert("List Box empty");
return false;
}
if(src.value.length== 0)
{
alert("please select an item");
return false;
}

for(var count= src.options.length-1; count >= 0; count--)
{
if(src.options[count].selected == true)
{
try
{
src.remove(count, null);
}
catch(error)
{
src.remove(count);
}
}
}
}

Comments or Responses

Login to post response