File: setslists/getslists.js

// Multiple Drop-Down Select Lists Script - http://coursesweb.net/
// Class to display multiple Drop-Down <select> lists
var GetSLists = function() {
  var thisob = this;        // stores the 'this' reference of the object with this class

  var optHierarchy = {'0':[]};          // stores items with 'parent_id':[child_IDs] for each <option> in <select> (starts with 'root')
  var optData = {'0':{'value':'Root', 'content':'', 'parent':-1}};

  var tableMysql = 0;     // if it is different from 0, represents table name, and gets data from MySQL
  var opt1 = 1;       // to know when is selected `1st option in <select>, 1 (modified in addSubSelect(), used in addCategory())
  var optID = 0;             // for the ID of current <option>
  var slevel = 1;          // level of current select lists
  var selID = 'sl1';       // id of current select list

/** Functions to get <select> data **/

  // adds 1st <select> with main options
  this.add1stSelect = function(from, resource) {
    // reset these properties couse after delete it is displayed 1st list
    optID = 0;
    slevel = 1;

    if(from == 'file') getSlistsTxt(resource);    // gets Drop-Down Lists from TXT file
    else if(from == 'mysql') {    // gets 1st Select from MySQL table
      tableMysql = resource;
      getSlistsMysql();
    }
  }

  // return <select> list with options-IDs in $options array in $optHierarchy
  var getSelect = function(options) {
    // starts current list
    var arrowsign = (slevel > 1) ? ' &rarr; ' : '';
    var slist = arrowsign +'<select onchange="obGSL.addSubSelect(this)" id="sl'+slevel+'" name="dslists[]"><option value="'+optID+'_'+'">---</option>';
    var nrarsubctg = options.length

    // traverse the object and create <option> with value=idctg_level
    for(var i in options) {
      if(optData[options[i]]) slist += '<option value="'+options[i]+'_'+optData[options[i]].value+'">'+optData[options[i]].value+'</option>';
    }

    return slist+'</select> <span id="n_sl'+(slevel+1)+'" class="dslists"></span>';
  }

  // function to get the Drop-Down list, receives the selected list object
  this.addSubSelect = function(slist) {
    selID = slist.id;
    slevel = 1 + selID.match(/[0-9]+/) * 1;         // sets the level of selected list in slevel property
    var opid_lvl = slist.value.split('_');      // separes id and parent-category of selected category /option
    optID = opid_lvl[0] * 1;           // id of selected option

    // if selected option is 1st <option> (value ends with '_'), empty the tag for next-select
    if(slist.value.match(/^[0-9]+_$/)) opt1 = 1;       // to know it was 1st <option>
    else  opt1 = 0;       // to know isn't 1st <option>
    document.getElementById('n_sl'+slevel).innerHTML = '';   // empty tag where will add next <select>
    document.getElementById('optioncnt').innerHTML = '';   // empty tag where will add option-content

    // if $tableMysql property is 0, use data from JS objects, else, calls getSlistsMysql()
    if(tableMysql == 0) {
      // if exists iitem of the selected option in $optHierarchy adds the <select> with <option>s and tag for next sub-<select>
      // else, empty the tag in which is added the sub-<select> of this <select>
      if(opt1 == 0 && optHierarchy[optID] && optHierarchy[optID].length > 0) {
        document.getElementById('n_sl'+slevel).innerHTML = getSelect(optHierarchy[optID]);
      }

      // if not 1st <option> and optData item, adds its Value and Content in form field, else, empty those fields
      if(opt1 == 0 && optData[optID]) {
        document.getElementById('optioncnt').innerHTML = optData[optID].content;
      }
      else document.getElementById('optioncnt').innerHTML = '';    //  option-content under <select>;
    }
    else if(opt1 == 0) getSlistsMysql();
  }

  // create the XMLHttpRequest object, according to browser
  function getXmlHttp() {
    var xmlHttp = null;           // will stere and return the XMLHttpRequest

    if(window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();     // Forefox, Opera, Safari, ...
    else if(window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");     // IE

    return xmlHttp;
  }

  // gets JSON objects from 'file' and sets $optHierarchy and $optData with their data
  var getSlistsTxt = function(tofile) {
    var ajaxreq =  getXmlHttp();		// get XMLHttpRequest object

    ajaxreq.open("POST", tofile, true);			// create the request

    ajaxreq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    // header for POST
    ajaxreq.send('&ajx=1');		//  make the ajax request, poassing the data

    // checks and receives the response
    ajaxreq.onreadystatechange = function() {
      // if valid JSON format, gets the JSON, array with two objects, for $optHierarchy and $optData
      if (ajaxreq.readyState == 4) {
        // if page not found, alert message, else, processes response-data
        if(ajaxreq.status == 404) alert('The resource: "'+ tofile +'" not found');
        else {
          // if valid JSON, sets the  $optHierarchy and $optData and adds the 1st select-list
          try {
            var jsonob = JSON.parse(ajaxreq.responseText);
            optHierarchy = jsonob[0];
            optData = jsonob[1];
            if(optHierarchy[0].length > 0) document.getElementById('n_sl1').innerHTML = getSelect(optHierarchy[0]);
          }
          catch(e) { alert('Incorrect JSON format'); }
        }
      }
    }
  }

  // gets and adds the required <select> and content of selected <option>
  var getSlistsMysql = function() {
    var ajaxreq =  getXmlHttp();		// get XMLHttpRequest object

    // message displayed till data is loaded, and empty option-content
    document.getElementById('n_sl'+ slevel).innerHTML = ' <em style="color:blue; font-weight:800;">Loading Data ...</em>';
    document.getElementById('optioncnt').innerHTML = '';

    ajaxreq.open("POST", 'setslists/setslists.php', true);			// create the request

    ajaxreq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    // header for POST
    ajaxreq.send('resname='+tableMysql+'&idop='+optID+'&ajx=1');		//  make the ajax request, poassing the data

    // checks and receives the response
    ajaxreq.onreadystatechange = function() {
      if (ajaxreq.readyState == 4) {
        // if resource not exists, alerts message, else, gets the JSON, array with two arrays: 0=string_select_lists, 1=option_content
        if(ajaxreq.responseText == 'Resource Not Found') alert('The resource: "'+ tableMysql +'" not found');
        else {
          try {
            // gets an 2dArray with data, sets and adds the <select> with child-options, and content of selected option
            var jsonob = JSON.parse(ajaxreq.responseText);
            if(jsonob['idv'].length > 0) document.getElementById('n_sl'+ slevel).innerHTML = addSelect(jsonob['idv']);
            else document.getElementById('n_sl'+ slevel).innerHTML = '';    // delete message added till data is loaded
            document.getElementById('optioncnt').innerHTML = jsonob['content'];
          }
          catch(e) { alert('Incorrect JSON format'); }
        }
      }
    }
  }

  // return <select> list with options data in $options array
  var addSelect = function(options) {
    // startws current list
    var arrowsign = (slevel > 1) ? ' &rarr; ' : '';
    var slist = arrowsign +'<select onchange="obGSL.addSubSelect(this)" id="sl'+slevel+'" name="dslists[]"><option value="'+optID+'_'+'">---</option>';
    var nrarsubctg = options.length

    // traverse the object and create <option> with value=idctg_level
    for(var i in options) {
      slist += '<option value="'+options[i]+'">'+options[i].replace(/^[0-9]+_/, '')+'</option>';
    }

    return slist+'</select> <span id="n_sl'+(slevel+1)+'" class="dslists"></span>';
  }
}

// create object to MakeSLists
var obGSL = new GetSLists();