Javascript Course


In this tutorial you can learn how to create a Multiple Select Dropdown List with JavaScript, more exactly, a Triple, and a Double Select Dropdown list.
In the HTML code of the page it is created the first select list, and empty HTML tags for the other select lists, and for the content displayed when an option is selected in the last dropdown list (which will be added with JavaScript).
After this HTML code, it is created the JavaScript code with Objects (in JSON format) with data for the select lists, and the content.
When the user chooses an option, it calls a function that adds the next dropdown list. When it is selected an option in the last select list, will be displayed a text-content (which can contain HTML elements) according to selected option.


Triple Select Dropdown list

Here's the code for Triple Select Dropdown lists (replace the options and content with your data, more explanations are in the comments in code): 
<h4>Example Triple Select Dropdown list</h4>
<!-- The first select list -->
Select Option: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
 <option>- - -</option>
 <option value="s1_opt1">S1 Option1</option>
 <option value="s1_opt2">S1 Option2</option>
</select>
<!-- Tags for the other 2 dropdown list, and for text-content -->
<span id="slist2"></span> <span id="slist3"></span> <div id="scontent"></div>

<script>
// Script Triple Select Dropdown List, from: coursesweb.net/javascript
var SList = new Object(); // JS object that stores data for options

// HERE replace the values with the text you want to be displayed near Select
var txtsl2 = 'Select Option:'; // text for the seccond dropdown list
var txtsl3 = 'Select Option:'; // text for the third dropdown list

/*
 Property with options for the Seccond select list
 The key in this object must be the same with the values of the options added in the first select
 The values in the array associated to each key represent options of the seccond select
*/
SList.slist2 = {
 "s1_opt1": ['s1o1_opt1', 's1o1_opt2'],
 "s1_opt2": ['s1o2_opt1', 's1o2_opt2'],
};

/*
 Property with options for the Third select list
 The key in this object must be the same with the values (options) added in each Array in "slist2" above
 The values in the array associated to each key represent options of the third select
*/
SList.slist3 = {
 "s1o1_opt1": ['s2o1_1_opt1', 's2o1_1_opt2'],
 "s1o1_opt2": ['s2o1_2_opt1', 's2o1_2_opt2'],
 "s1o2_opt1": ['s2o2_1_opt1', 's2o2_1_opt2'],
 "s1o2_opt2": ['s2o2_2_opt1', 's2o2_2_opt2'],
};

/*
 Property with content associated to the options of the third select list
 The key in this object must be the same with the values (options) added in each Array in "slist3" above
 The values of each key represent the content displayed after the user selects an option in 3rd dropdown list
*/
SList.scontent = {
 "s2o1_1_opt1": 'Content for s2o1_1_opt1',
 "s2o1_1_opt2": 'Content for s2o1_1_opt2',
 "s2o1_2_opt1": 'Content for s2o1_2_opt1',
 "s2o1_2_opt2": 'Content for s2o1_2_opt2',
 "s2o2_1_opt1": 'Content for s2o2_1_opt1',
 "s2o2_1_opt2": 'Content for s2o2_1_opt2',
 "s2o2_2_opt1": 'Content for s2o2_2_opt1',
 "s2o2_2_opt2": 'Content for s2o2_2_opt2',
};

 /* From here no need to modify */

// function to get the dropdown list, or content
SList.getSelect = function(slist, option) {
 document.getElementById('scontent').innerHTML = ''; // empty option-content

 if(SList[slist][option]) {
 // if option from the last Select, add text-content, else, set dropdown list
 if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
 else {
 var addata = '<option>- - -</option>';
 for(var i=0; i<SList[slist][option].length; i++) {
 addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
 }

 // cases for each dropdown list
 switch(slist) {
 case 'slist2':
 document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">'+addata+'</select>';
 document.getElementById('slist3').innerHTML = '';
 break;
 case 'slist3':
 document.getElementById('slist3').innerHTML = txtsl3+' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
 break;
 }
 }
 }
 else {
 // empty the tags for select lists
 if(slist == 'slist2') {
 document.getElementById('slist2').innerHTML = '';
 document.getElementById('slist3').innerHTML = '';
 }
 else if(slist == 'slist3') {
 document.getElementById('slist3').innerHTML = '';
 }
 }
}
</script>
The code above will create this result:
Select Option:

IMPORTANT:
- Don't change the variable names, or the ID of the HTML tags used for dropdown list and for the content.
- In the JavaScript code, "slist2" contains Arrays (data between square brackets [...]) with options for the seccond select list; each array must be associated to an option added in the first select list.
- "slist3" contains Arrays with options for the third select list; each array must be associated to an option added in the arrays from "slist2"
- "scontent" contains the text-content for each option added in the Arrays of the last select list, "slist3".

If you want to not display a content after the 3rd select list, delete:   onchange="SList.getSelect(\'scontent\', this.value);"   (in the code under: case 'slist3': ).

Double Select Dropdown List

If you want to create a Double Select Dropdown list, you can use the code presented in the following example, just modify data in "slist2", and "scontent" with yor data.
- Example with two Select lists: 
<h4>Example Double Select Dropdown List</h4>
<!-- The first select list -->
Select WebSite: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
 <option>- - -</option>
 <option value="marplo">MarPlo.net</option>
 <option value="coursesweb">CoursesWeb.net</option>
</select>
<!-- Tags for the seccond dropdown list, and for text-content -->
<span id="slist2"></span> <div id="scontent"></div>

<script>
/* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
var SList = new Object(); // JS object that stores data for options

// HERE replace the value with the text you want to be displayed near Select
var txtsl2 = 'Select Category:';

/*
 Property with options for the Seccond select list
 The key in this object must be the same with the values of the options added in the first select
 The values in the array associated to each key represent options of the seccond select
*/
SList.slist2 = {
 "marplo": ['ajax', 'games', 'anime'],
 "coursesweb": ['php-mysql', 'javascript', 'flash-as3']
};

/*
 Property with text-content associated with the options of the 2nd select list
 The key in this object must be the same with the values (options) added in each Array in "slist2" above
 The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
*/
SList.scontent = {
 "ajax": 'marplo.net/ajax/',
 "games": 'marplo.net/jocuri/',
 "anime": 'marplo.net/anime/',
 "php-mysql": 'coursesweb.net/php-mysql/',
 "javascript": 'coursesweb.net/javascript/',
 "flash-as3": 'coursesweb.net/flash/'
};

 /* From here no need to modify */

// function to get the dropdown list, or content
SList.getSelect = function(slist, option) {
 document.getElementById('scontent').innerHTML = ''; // empty option-content

 if(SList[slist][option]) {
 // if option from the last Select, add text-content, else, set dropdown list
 if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
 else if(slist == 'slist2') {
 var addata = '<option>- - -</option>';
 for(var i=0; i<SList[slist][option].length; i++) {
 addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
 }

 document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
 }
 }
 else if(slist == 'slist2') {
 // empty the tag for 2nd select list
 document.getElementById('slist2').innerHTML = '';
 }
}
</script>
- This code will display the following results:
Select WebSite:

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
Multiple Select Dropdown List with JavaScript

Last accessed pages

  1. PHP Simple HTML DOM Parser (12452)
  2. Disable button and Enable it after specified time (17532)
  3. Get Mime Type of file or string content in PHP (6229)
  4. PHP MySQL - using MySQLi (9669)
  5. Integer and Float value in Select with PDO from string to numeric (8658)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (477)
  2. CSS cursor property - Custom Cursors (81)
  3. The Mastery of Love (71)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (63)
  5. CSS3 2D transforms (46)