This is an Ajax Script to create Multiple Drop-Down Select Lists.
It can create multiple dropdown select input lists linked together. There is Not a limit to the number of sub-levels for the Drop-down select lists.
An interactive editor is provided to add, modify or delete lists and the associated options. Options can have additional content that is displayed when they are selected.
The Select lists are created with JavaScript, then, the code structure of the Drop-Down Select Lists (options, values) can be saved with PHP in text file (in JSON format) and /or in MySQL database.

• To Download it, click: Multiple Select Lists Creator script.

To see and test this script, click: Demo Create Multiple Drop-Down Select Lists Script.

On the Demo Page you can create Online your Multiple Dropdown Select Lists, get the code and include it in your web site, without need to Download and install the script.

The script is free, without any support or assistance. You can use it, modify, and publish it freely.


- This Multiple Drop-Down Select Lists Creator provides an user interface (Administration page) for composing <option> Lists; to Add options in <select> lists, Modify options data, Delete lists, Save and Load saved Select Lists.
- Each Option can have an additional content that is displayed into a separated HTML element (under the Select lists).
- The script generates and displays the HTML and JavaScript code that can be used to include the Select Lists in your web page; also, the JSON and SQL code, if you want to save the Drop-Down Lists manually in JSON file or MySQL database.
- You can load a saved Drop-Down Select Lists to continue editing it, to add and modify options.
- You can add multiple "sets" of drop-down select lists in the same page.
- Method to change the default text of the first option in the first pulldown Select.

Other details, instalation and settings in the "readme.html" file in the script.

• Example with two Sets of Drop-down Select Lists in the same form, created with this script. Using also the method to change the default text of the first option in the first pulldown Select-list of each set:
Set 1:

Set 2:

Advanced Usage

• The <select> lists are added with JavaScript in <span> elements with class="dslists". This class can be used in CSS to style de <select> items in your web page.
For example:
.dslists select {
 background: #fbfeda;

• To change the default text ("---") of the first Option from the first pulldown Select-list, use this syntax (AFTER you call the setObDSL() function). See the example in the "test_set_1st_option_text.html" file in the archive with the script.
 obDSL[0].set1stOpTxt(resName, str);
- resName = the name of the resource with select lists data.
- str = a string with the text for the first Option of that set of Select-lists.

• Each <select> element has name="dslists[]" attribute, that can be used in PHP scripts to get selected value.
If you add the Select-Lists into a <form> that sends data to a PHP script, you can use the "dslists" name to get the values of selected options.
        $_POST['dslists'][0] contains the value of selected option in first select-list, $_POST['dslists'][1] contains the value of selected option in second select-list, and so on.

• The value of each <option> contains the ID of that option and String value you added for that option, separated by "_", for example: value="3_text-string".
If you want to separate the ID and text-string value in PHP script, apply explode() function.
For example, this code separates and outputs the ID and Text value of the options selected in "dslists" items.
if(isset($_POST['dslists'])) {
  $nrdsl = count($_POST['dslists']);     // number of 'dslists' items

  // outputs the ID and String value of each selected option
  for($i=0; $i<nrdsl; $i++) {
    $id_val = explode($_POST['dslists'][$i], 2);       // gets separated ID and text-string

    // $id_val[0] contains the ID, $id_val[1] contains the text-string
    echo '<br/>ID = '. $id_val[0] .' / Text = '. $id_val[1];

Daily Test with Code Example

Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark></mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
Multiple Drop-Down Select Lists Creator

Last accessed pages

  1. Create simple Website with PHP (20259)
  2. Understanding OOP - Object Oriented Programming (3497)
  3. SHA256 Encrypt hash in JavaScript (6691)
  4. Adobe Flash Courses ActionScript 3 Tutorials (5007)
  5. innerHTML and outerHTML to Get and Replace HTML content (18441)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (489)
  2. Read Excel file data in PHP - PhpExcelReader (443)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (426)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (367)
  5. PHP getElementById and getElementsByTagName (305)