How to add or remove list box items dynamically using JavaScript

Following example shows you how to add or remove list items in HTML option element in JavaScript

In some occasions you may want to add one or more options to HTML select box/list box and some times remove items from a HTML dropdown/list box. You can use a simple JavaScript code to add/remove options from a HTML select element. following examples describe how to dynamically change items in a dropdown box.

1. How to Add elements/options to a list box dynamically using JavaScript?

Example : Add options/items to a list box/dropdown box/list menu in javaScript You can add any item to the dropdown box but you can't duplicate list items.

Year
Option Value
Option Display Text

Example code for add new option to HTML select element

<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<title>Add Option Items </title>
<script type="text/javaScript">
function addNewListItem(){
var htmlSelect=document.getElementById('selectYear');
var optionValue=document.getElementById('txtYearValue');
var optionDisplaytext=document.getElementById('txtYearDisplayValue');

if(optionValue.value==''||isNaN(optionValue.value)){
alert('please enter option value');
optionValue.focus();
return false;
}
if(optionDisplaytext.value==''||isNaN(optionDisplaytext.value)){
alert('please enter option display text');
optionDisplaytext.focus();
return false;
}
if(isOptionAlreadyExist(htmlSelect,optionValue.value)){
alert('Option value already exists');
optionValue.focus();
return false;
}
if(isOptionAlreadyExist(htmlSelect,optionDisplaytext.value)){
alert('Display text already exists');
optionDisplaytext.focus();
return false;
}
var selectBoxOption = document.createElement("option");
selectBoxOption.value = optionValue.value;
selectBoxOption.text = optionDisplaytext.value;
htmlSelect.add(selectBoxOption, null);
alert("Option has been added successfully");
return true;

}
function isOptionAlreadyExist(listBox,value){
var exists=false;
for(var x=0;x<listBox.options.length;x++){
if(listBox.options[x].value==value || listBox.options[x].text==value){
exists=true;
break;
}
}
return exists;
}
</script>
</head>

<body>
<table border="0" align="left">
<tr>
<td align="right">Year</td>
<td align="left"><select name="selectYear" id="selectYear">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select></td>
</tr>
<tr>
<td align="right">Option Value</td>
<td align="left"><input name="txtYearValue" type="text" id="txtYearValue" /></td>
</tr>
<tr>
<td align="right">Option Display Text</td>
<td align="left"><input name="txtYearDisplayValue" type="text" id="txtYearDisplayValue" /></td>
</tr>
<tr>
<td align="right"> </td>
<td align="left"><input name="btnAddItem" type="button" id="btnAddItem" value="Add Option" onclick="javaScript:addNewListItem();" /></td>
</tr>
</table>
</body>
</HTML>

Example 2:
Animal
Option Value
Option Display Text

Copy and paste above code and modify it to add string values

How to check option already exists or not?

function isOptionAlreadyExist(listBox,value){
var exists=false;
for(var x=0;x<listBox.options.length;x++){
if(listBox.options[x].value==value || listBox.options[x].text==value){
exists=true;
break;
}
}
return exists;
}


Example 3:Add numbers to a listbox.
Even Numbers
Option Value
Option Display Text

How to add new option to a HTML select element?

var htmlSelect = document.createElement("selectAnimals");//HTML select box
var optionValue=document.getElementById('txtValue');
var optionDisplaytext=document.getElementById('txtDisplayValue');

var selectBoxOption = document.createElement("option");//create new option
selectBoxOption.value = optionValue.value;//set option value
selectBoxOption.text = optionDisplaytext.value;//set option display text
htmlSelect.add(selectBoxOption, null);//add created option to select box.

2. How to remove options/items from listbox dynamically using JavaScript?

Example 1 : Remove options/items from a list box/dropdown box/list menu

Example 1:
Select a year to remove

Example code for remove list items from a HTML select element

<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<title>Remove Select Options </title>
<script type="text/javaScript">
function removeListItem(){
var htmlSelect=document.getElementById('selectYear');

if(htmlSelect.options.length==0){
alert('You have removed all options');
return false;
}
var optionToRemove=htmlSelect.options.selectedIndex;
htmlSelect.remove(optionToRemove);
alert('The selected option has been removed successfully');
return true;
}
</script>
</head>

<body>
<table border="0" align="left">
<tr>
<td align="right">select a year to remove </td>
<td align="left"><select name="selectYear" id="selectYear">
<option value="2000" selected="selected">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select></td>
</tr>
<tr>
<td align="right"> </td>
<td align="left"><input name="btnRemoveItem" type="button" id="btnRemoveItem" value="Remove Option" onClick="javaScript:removeListItem();" /></td>
</tr>
</table>
</body>
</HTML>

Example 2 :Select a country and click on Remove Country button to delete them from the list menu.
Select a country to remove

How to remove list item from list box?

var htmlSelect=document.getElementById('selectYear');//HTML select box
var optionToRemove=htmlSelect.options.selectedIndex;//get the selected index
htmlSelect.remove(optionToRemove);//remove option from list box