Dropdown Menu Load On Select, Not Page Load

Question

I have the following page with 2 dropdown filters. When the user selects and option in dropdown 1, a list of hundreds of options under dropdown 2 appear for the user to select. While this solution works, the page load takes very load upon first visit.

Is there a way for the iframes to load upon the user selecting an option in the dropdown rather than all the iframes loading all at once when the page loads?

Here's a JSFiddle. Any help would really be appreciated.

https://jsfiddle.net/wp9ke0td

Thanks,

$(document).ready(function() {
  $("select").change(function() {
    $(this).children("option:selected").each(function() {
      if ($(this).attr("value") == "catlist") {
        $(".queuelist").hide();
        $(".agentlist").hide();
        $(".queuecard").hide();
        $(".agentcard").hide();
        $(".catlist").show();
      }
      if ($(this).attr("value") == "queuelist") {
        $(".agentlist").hide();
        $(".agentcard").hide();
        $(".queuecard").hide();
        $(".queuelist").show();
        $(".queuelist select").change();
      }
      if ($(this).attr("value") == "agentlist") {
        $(".queuelist").hide();
        $(".agentcard").hide();
        $(".queuecard").hide();
        $(".agentlist").show();
        $(".agentlist select").change();
      }
      if ($(this).attr("value") == "MPFUC") {
      console.log("FUC");
        $(".agentcard").hide();
        $(".queuecard").hide();
        $(".MPFUC").show();
      }
      if ($(this).attr("value") == "MPFLC") {
      console.log("FlC");
        $(".agentcard").hide();
        $(".queuecard").hide();
        $(".MPFLC").show();
      }
      if ($(this).attr("value") == "claire") {
        $(".agentcard").hide();
        $(".queuecard").hide();
        $(".claire").show();
      }
      if ($(this).attr("value") == "darren") {
        $(".agentcard").hide();
        $(".queuecard").hide();
        $(".darren").show();
      }

    });
  }).change();
});

Answer 1

You have two options to increase speed of your script:

1. load child select data on main select changed using ajax.

   Even more, you can firstly load and render page. After it is all loaded then initiate to load (using ajax) main select options, or you can load main select options after user clicks on it.

2. use vanillaJS instead of jquery, you will be surprised how fasted is it.

Answer 2

Here is an example jsfiddle

Step 1: Save your options data in key value lists.

var categoryList = [{key: -1, value: 'Select Category...'}, {key: 'work', value: 'Work Queues'}, {key: 'agent', value: 'Agents'}];
var workList = [{key: -1, value: 'Select Queue...'}, {key: 'google.someurl.com', value: 'Google'}, {key: 'yahoo.someurl.com', value: 'Yahoo'}];
var agentList = [{key: -1, value: 'Select Agent...'}, {key: 'claire.someurl.com', value: 'Claire'}, {key: 'darren.someurl.com', value: 'Darren'}];

var keyValueLists = {
  category: categoryList,
  work: workList,
  agent: agentList,
}

Step 2: Set your select options by code (using key value lists).

function setSelect(queryString, listName){
  var element = $(queryString);
  element.empty();

  if(!listName || listName.length <= 0){
    element.hide();
  }else{
    getKeyValueList(listName, function(list){
      for(var i = 0; i < list.length; i++){
        var l = list[i];
        element.append( $('<option></option>').attr("value",l.key).text(l.value) );
      }
      element.show();
      console.log('setting select: ' + queryString, list);
    });
  }
}

Step 3: Fetch key value lists if you do not already have them cached.

function getKeyValueList(name, callback){
  if(!keyValueLists.hasOwnProperty(name)){//if true, keyValue list is not chached
  //fetch keyValueList with ajax
  //cache list -> add as property on keyValueLists
  //callback(keyValueLists[name]);
  }else{
    callback(keyValueLists[name]);
  }
}

Step 4: Set url of Iframe.

function setIframe(url){
  var element = $('iframe.someiframe');
  if(!url){
    element.hide();
  }else{
    element.show();
    element.attr('src', url);
  }
}