Multiple Drop-Down Select Lists Creator

This is an Ajax Script to create Multiple Drop-Down Select Lists.
It can create multiple dropdown select input lists linked together.
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 TXT 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 TXT file or MySQL database.
- You can load a saved Drop-Down Select Lists to continue editing it, to add and modify options.

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

• Example Drop-down Select Lists created with this script:

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;

- 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];