In this tutorial it is presented a JavaScript object (named adOption) with methods that can be used to add and delete options in a Select drop down list using JavaScript.

The Select list is initially empty.
When user inserts some text in the textbox and click on 'Add Option' button, the value in the textbox is added to the select listbox. If the textbox is empty, or there is already an option with that value, throw an alert message.
When user adds some text in the textbox and click on 'Delete Option' button, the option with that value is removed from the Select list. If the value is not present in the Select listbox it again show an alert that the value not exist.
When user clicks on an option in the select list, its value is added in the textbox.


Script code with example

- For explanations about the code, see the comments in script.
<form id='frm' action='' method='post'>
 Select list:<br>
 <select name='sel_list' id='sel_list' size='2' onchange="adOption.selOpt(this.value, 'optval')"></select><br><br>
 Add an option: <input type='text' name='optval' id='optval' /><br><br>
 <input type='button' id='addopt' name='addopt' value='Add Option' onclick="adOption.addOption('sel_list', 'optval');" /> &nbsp;
 <input type='button' id='del_opt' name='del_opt' value='Delete Option' onclick="adOption.delOption('sel_list', 'optval');" />
</form>

<script>
// Free JavaScript course - coursesweb.net

// create the object with methods to add and delete <option></option>
var adOption ={};

// method that check if the option is already in list
// receives the id of the <select></select> list, and box with the value for <option>
adOption.checkList = function(list, optval){
 var re = 0; // variable that will be returned

 // get the <option> elements
 var opts = document.getElementById(list).getElementsByTagName('option');

 // if the option exists, sets re=1
 for(var i=0; i<opts.length; i++){
 if(opts[i].value == document.getElementById(optval).value){
 re = 1;
 break;
 }
 }

 return re;
 };

 // method that adds <option>
adOption.addOption = function(list, optval){
 // gets the value for <option>
 var opt_val = document.getElementById(optval).value;

 // check if the user adds a value
 if(opt_val.length > 0) {
 // check if the value not exists (when checkList() returns 0)
 if(this.checkList(list, optval) == 0) {
 // define the <option> element and adds it into the list
 var myoption = document.createElement('option');
 myoption.value = opt_val;
 myoption.innerHTML = opt_val;
 document.getElementById(list).insertBefore(myoption, document.getElementById(list).firstChild);

 document.getElementById(optval).value =''; // delete the value added in text box
 }
 else alert('The value '+opt_val+' already added');
 }
 else alert('Add a value for option');
};

// method that delete the <option>
adOption.delOption = function(list, optval){
 // gets the value of <option> that must be deleted
 var opt_val = document.getElementById(optval).value;

 // check if the value exists (when checkList() returns 1)
 if(this.checkList(list, optval) == 1) {
 // gets the <option> elements in the <select> list
 var opts = document.getElementById(list).getElementsByTagName('option');

 // traverse the array with <option> elements, delete the option with the value passed in 'optval'
 for(var i=0; i<opts.length; i++) {
 if(opts[i].value == opt_val) {
 document.getElementById(list).removeChild(opts[i]);
 break;
 }
 }
 }
 else alert('The value '+opt_val+' not exist');
}

// method that adds the selected <option> in text box
adOption.selOpt = function(opt, txtbox) { document.getElementById(txtbox).value = opt; }
</script>
- The method adOption.addOption('sel_list', 'optval') adds in the <select> list (with the id='sel_list') the value added in the text box (with id='optval').
- The method adOption.delOption('sel_list', 'optval') delete from the <select> list (with the id='sel_list') the option with the value added in the text box (with id='optval').
- The method adOption.selOpt(this.value, 'optval') adds the value of the selected option in the text box (with id='optval').

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Add and Delete options in Select list using JavaScript

Last accessed pages

  1. sPBM - Simple PHP Backup Manager (1186)
  2. Contact page - CoursesWeb (10970)
  3. Tabs effect with CSS (11677)
  4. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (17576)
  5. array_map and array_search in JavaScript (1395)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1977)
  2. Contact page - CoursesWeb (1925)
  3. Tabs effect with CSS (1925)
  4. Insert, Select and Update NULL value in MySQL (1228)
  5. PHP getElementById and getElementsByTagName (723)