Multiple Drop-Down Select Lists Creator

from coursesweb.net

This is an Ajax Script to create Multiple Drop-Down Select Lists.
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.
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 has Administration page 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.

Installation and Settings

1. Open the "setslists.php" file (in "setslists" directory) and add your data for Admin; Name and Password to these constants (they are required when you want to save the Drop-Down Select Lists):
define('ADMNAME', 'name');
define('ADMPASS', 'password');
- If you want to save data in MySQL database, the PHP server must support PDO for connection to MySQL.
Edit the following data in the "setslists.php" file:
define('DBHOST', 'localhost');            - replace localhost with your MySQL server address
define('DBUSER', 'root');                 - replace root with your database user name
define('DBPASS', 'passdb');               - replace passdb with your password for MySQL database
define('DBNAME', 'dbname');               - replace dbname with the name of your MySQL database

2. Copy on your server the directories: "setslists", and "slists" (with all their files), and the "create_select_lists.html" file.

3. The "slists" directory is necesary only if you want to save the Option Lists data in TXT files.
In this case you must set read-write-execute permissions to this folder and its ".txt" files, CHMOD 0777 (or 0755) so the PHP can write data in these files.

4. Open the "create_select_lists.html" page in your browser. For example, in your browser access this address ("localhost" is the domain name). Then you can start to build your DropDown-Select-Lists.

- To get /load a saved Dropdown-Lists for editing it, click on the "Get Saved Select Lists" tab.
- From the "Get Code" section you can copy the HTML, JSON, and SQL codes of your Dropdown-Select-Lists.

• For test, the script contains a Dropdown-Select-Lists saved in "slists.txt" file (in the "slists/" folder), you can use it to see how the script works, with the files for test: "test_mysql.html", and "test_txt.html".
Also, you can test it online on the page: Demo Multiple Dropdown-Select-Lists Creator

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, see the CSS code in pages for test).

- 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.
For example, this code outputs the values of the options selected in "dslists" items.
if(isset($_POST['dslists'])) {
  $nrdsl = count($_POST['dslists']);     // number of 'dslists' items
  for($i=0; $i<nrdsl; $i++) {
    echo '<br/>'. $_POST['dslists'][$i];
  }
}

- 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, like in this example.
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];
  }
}

Other details

- The code with data and structure of the Select-Lists are processed in JavaScript from two objects:
optHierarchy - contains an object /array with {parent_id: [childs-IDs]} (to each option that has sub-options it is associated an array with the IDs of its sub-options, separated by comma).
optData - contains an object with data of the option lists (value, content, parent): {option_id:{'value':'text-value', 'content':'additional-option-content', 'parent':'parent_id'}}
These two objects are saved in JSON format in TXT files.

- In MySQL table, the Options data are stored in these columns corresponding with the indexs of the "optData" object:
          id - 'value' - 'content' - 'parent'
The PHP script selects data from MySQL table, creates the two objects/ arrays specified above, then sends them to Ajax in JSON format.

- The script was succesfully tested in Mozila Firefox, Google Chrome, Internet Explorer 8, and Opera browsers.

With respect, CoursesWeb.net