Multiple Drop-Down Select Lists Creator

Javascript Course

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.

Features

- 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:

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

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net