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