Function not being called after drop-down selection

Question

I implemented a double drop-down and my function calling code, and after selecting something from the drop-down, the function is not being called.

The code is supposed to run a function relevant to the drop-down selection. This was tested on a normal drop-down and everything ran smoothly, but will not run on this double drop-down for some reason.

The code is outputting the selection, but I would like it to call the function.

Any help would be much appreciated.

Thanks!

        <!-- The first select list -->
    <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
     <option>- - -</option>
     <option value="amazon">Amazon</option>
     <option value="apple">Apple</option>
     <option value="keurig">Keurig</option>
     <option value="nike">Nike</option>
    </select>
    <!-- Tags for the seccond dropdown list, and for text-content -->
    <span id="slist2"></span> <div id="scontent"></div>

    <script><!--
    /* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
    var SList = new Object();             // JS object that stores data for options

    // HERE replace the value with the text you want to be displayed near Select
    var txtsl2 = '';

    /*
     Property with options for the Seccond select list
     The key in this object must be the same with the values of the options added in the first select
     The values in the array associated to each key represent options of the seccond select
    */
    SList.slist2 = {
     "amazon": ['Kindle Fire HD', 'Kindle Charger', 'Kindle Fire HDX'],
     "apple": ['MacBook', 'iMac', 'iPhone', 'iPad'],
     "keurig": ['Platinum', 'Vue'],
     "nike": ['Fuel Band']
    };


    /*
     Property with text-content associated with the options of the 2nd select list
     The key in this object must be the same with the values (options) added in each Array in "slist2" above
     The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
    */

SList.scontent = {
 "Kindle Fire HD": 'kindlefirehd',
 "Kindle Charger": 'kindlecharg',
 "Kindle Fire HDX": 'kindlefirehdx',
 "MacBook": 'macbook',
 "iMac": 'imac',
 "iPhone": 'iphone',
 "iPad": 'ipad',
 "Platinum": 'platinum',
 "Vue": 'vue',
 "FuelBand": 'fuelband'
};





        /* From here no need to modify */

    // function to get the dropdown list, or content
    SList.getSelect = function(slist, option) {
      document.getElementById('scontent').innerHTML = '';           // empty option-content

      if(SList[slist][option]) {
        // if option from the last Select, add text-content, else, set dropdown list
        if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
        else if(slist == 'slist2') {
          var addata = '<option>- - -</option>';
          for(var i=0; i<SList[slist][option].length; i++) {
            addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
          }

          document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
        }
      }
      else if(slist == 'slist2') {
        // empty the tag for 2nd select list
        document.getElementById('slist2').innerHTML = '';
      }
    }

    var functions = {
        kindlefirehd: function(){window.alert("func1 called")},
        kindlecharge: function(){window.alert("func1 called")},
        kindlefirehdx: function(){window.alert("func1 called")},
        macbook: function(){window.alert("func1 called")},
        imac: function(){window.alert("func1 called")},
        iphone: function(){window.alert("func1 called")},
        ipad: function(){window.alert("func1 called")},
        platinum: function(){window.alert("func1 called")},
        vue: function(){window.alert("func1 called")},
        fuelband: function(){window.alert("func1 called")}
    }

    $( "select" )
      .change(function () {
        var selected = $( "select option:selected" );
        functions[selected.val()]();
      })
      .change();



    </script>

Answer 1

Your slist2 select is dynamically generated content. In order to attach event handler to dynamic content, you should use $(document).on('change', 'select', function(){}) instead.

You were calling functions['Kindle Fire HD']() instead of functions['kindlefirehd']().

Replace

$( "select" )
  .change(function () {
    var selected = $( "select option:selected" );
    functions[selected.val()]();
  })
  .change();

with

$(document).on('change', 'select[name=slist2]', function(){
  var selected = $(this).val();
  var funcName = SList.scontent[selected];
  functions[funcName]();
});

See Demo

Answer 2

Your are right at all but have mistake at

   $( "select" )
      .change(function () {
        var selected = $( "select option:selected" );
        functions[selected.val()]();
      })
      .change();

Remove above code Try below Example

JS

    var SList = new Object();             // JS object that stores data for options
    var txtsl2 = '';

    SList.slist2 = {
     "amazon": ['Kindle Fire HD', 'Kindle Charger', 'Kindle Fire HDX'],
     "apple": ['MacBook', 'iMac', 'iPhone', 'iPad'],
     "keurig": ['Platinum', 'Vue'],
     "nike": ['Fuel Band']
    };

SList.scontent = {
 "Kindle Fire HD": 'kindlefirehd',
 "Kindle Charger": 'kindlecharg',
 "Kindle Fire HDX": 'kindlefirehdx',
 "MacBook": 'macbook',
 "iMac": 'imac',
 "iPhone": 'iphone',
 "iPad": 'ipad',
 "Platinum": 'platinum',
 "Vue": 'vue',
 "FuelBand": 'fuelband'
};

SList.getSelect = function(slist, option) {
      document.getElementById('scontent').innerHTML = '';           // empty option-content

if(SList[slist][option]) {
        // if option from the last Select, add text-content, else, set dropdown list
        if(slist == 'scontent'){ document.getElementById('scontent').innerHTML = SList[slist][option];
var selected = SList[slist][option];
functions[selected]();
}
        else if(slist == 'slist2') {
          var addata = '<option>- - -</option>';
          for(var i=0; i<SList[slist][option].length; i++) {
            addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
          }

          document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
        }
      }
      else if(slist == 'slist2') {
        // empty the tag for 2nd select list
        document.getElementById('slist2').innerHTML = '';
      }
    }

    var functions = {
        kindlefirehd: function(){window.alert("func1 called")},
        kindlecharge: function(){window.alert("func1 called")},
        kindlefirehdx: function(){window.alert("func1 called")},
        macbook: function(){window.alert("func1 called")},
        imac: function(){window.alert("func1 called")},
        iphone: function(){window.alert("func1 called")},
        ipad: function(){window.alert("func1 called")},
        platinum: function(){window.alert("func1 called")},
        vue: function(){window.alert("func1 called")},
        fuelband: function(){window.alert("func1 called")}
    }

Change

Change is only at if condition

   if(SList[slist][option]) {
            if(slist == 'scontent'){ document.getElementById('scontent').innerHTML = SList[slist][option];
            var selected = SList[slist][option]; // Save Selected value to variable
            functions[selected]();               // call function with argument
    }

JSfiddle