21 Mar
Sometime we need a simple JavaScript function to add and remove few values from select box. For example if you have a list of language and want to add only known language then you can do it by simple JavaScript function .
Add in to select box
function testAdd(){
var arrTmpTxt=new Array();
var arrTmpVal=new Array();
if (tounge.value!=-1 && !isAlreadyAdded(tounge.value)) {
addTounge.options[addTounge.length]=new Option(tounge.options[tounge.selectedIndex].text,tounge.value);
}else{
alert("Language is already added.");
}
}
Check if you already have language value in your known language list, just to avoid delicacy
function isAlreadyAdded(val){
var isAlreadyAdded=false;
for(i=0;i<addTounge.length;i++){
if (addTounge.options[i].value==val){
isAlreadyAdded=true;
}
}
return isAlreadyAdded;
}
Delete added value or sent back in main select box
function testDelete(){
var arrTxt=Array();
var arrVal=Array();
j=0;
for(i=0;i<addTounge.length;i++){
if (addTounge.value!=addTounge.options[i].value){
arrTxt[j]=addTounge.options[i].text;
arrVal[j]=addTounge.options[i].value;
j++;
}
}
document.getElementById("add_remov_mother_tongue").length=0;
for(i=0;i<arrTxt.length;i++) {
document.getElementById("add_remov_mother_tongue").options[i]=new Option(arrTxt[i],arrVal[i]);
}
}
Let put all in a single html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rajeev Achra</title>
</head>
<body>
<form name="testForm">
<td width="124" valign="top"><font class="formtext">Mother Tongue</font></td>
<td width="164"><span class="for2">
<select name="prefer_mother_tongue" class="textbox" size="4" id="prefer_mother_tongue">
<option value="17" selected="selected">Hindi</option>
<option value="100">Any</option>
<option value="1">Arunachali</option>
<option value="2">Assamese</option>
<option value="3">Awadhi</option>
<option value="4">Bengali</option>
<option value="5">Bhojpuri</option>
<option value="6">Brij</option>
<option value="7">Bihari</option>
<option value="8">Chatisgarhi</option>
<option value="9">Dogri</option>
<option value="10">English</option>
<option value="11">French</option>
<option value="12">Garhwali</option>
<option value="13">Garo</option>
<option value="14">Gujarati</option>
<option value="15">Haryanvi</option>
<option value="16">Himachali/Pahari</option>
<option value="18">Kanauji</option>
<option value="19">Kannada</option>
<option value="20">Kashmiri</option>
<option value="21">Khandesi</option>
<option value="22">Khasi</option>
<option value="23">Konkani</option>
<option value="24">Koshali</option>
<option value="25">Kumoani</option>
<option value="26">Kutchi</option>
<option value="27">Lepcha</option>
<option value="28">Ladacki</option>
<option value="29">Magahi</option>
<option value="30">Maithili</option>
<option value="31">Malayalam</option>
<option value="32">Manipuri</option>
<option value="33">Marathi</option>
<option value="34">Marwari</option>
<option value="35">Miji</option>
<option value="36">Mizo</option>
<option value="37">Monpa</option>
<option value="38">Nicobarese</option>
<option value="39">Nepali</option>
<option value="40">Oriya</option>
<option value="41">Punjabi</option>
<option value="42">Rajasthani</option>
<option value="43">Sanskrit</option>
<option value="44">Santhali</option>
<option value="45">Sindhi</option>
<option value="46">Sourashtra</option>
<option value="47">Tamil</option>
<option value="48">Telugu</option>
<option value="49">Tripuri</option>
<option value="50">Tulu</option>
<option value="51">Urdu</option>
<option value="99">Others</option>
</select>
</span>
<label for="radio8"></label></td>
<input type="button" value="Add" onclick="testAdd()"/>
<input type="button" value="Remove" onclick="testDelete()"/>
<select id="add_remov_mother_tongue" name="add_remov_mother_tongue" size="4" >
</select>
<br/>
</form>
</body>
<script>
var tounge=document.getElementById("prefer_mother_tongue");
var addTounge=document.getElementById("add_remov_mother_tongue");
function testAdd(){
var arrTmpTxt=new Array();
var arrTmpVal=new Array();
if (tounge.value!=-1 && !isAlreadyAdded(tounge.value)) {
addTounge.options[addTounge.length]=new Option(tounge.options[tounge.selectedIndex].text,tounge.value);
}else{
alert("Language is already added.");
}
}
function testDelete(){
var arrTxt=Array();
var arrVal=Array();
j=0;
for(i=0;i<addTounge.length;i++){
if (addTounge.value!=addTounge.options[i].value){
arrTxt[j]=addTounge.options[i].text;
arrVal[j]=addTounge.options[i].value;
j++;
}
}
document.getElementById("add_remov_mother_tongue").length=0;
for(i=0;i<arrTxt.length;i++) {
document.getElementById("add_remov_mother_tongue").options[i]=new Option(arrTxt[i],arrVal[i]);
}
}
function isAlreadyAdded(val){
var isAlreadyAdded=false;
for(i=0;i<addTounge.length;i++){
if (addTounge.options[i].value==val){
isAlreadyAdded=true;
}
}
return isAlreadyAdded;
}
</script>
</html>
It’s just a raw example you can do it with batter way. By this only you can get an idea how to add and remove an element with simple JavaScript.
I am a software engineer who specializes in Internet applications. I have worked with a wide variety of technologies and programming languages to open source LAMP environments. I have more than 6 years of object-oriented programming experience and am highly proficient in ActionScript, PHP, MYSQL, JavaScript, Jquery and a multitude of other technologies used in modern web applications.
Latest posts by Rajeev Achra (see all)
- Jquery webcam plugin - June 19, 2016
- How To Add and Delete Users on a CentOSServer - June 5, 2016
- How To Set Up vsftpd on CentOS 6 - June 5, 2016