下拉菜单加载选择，而不是页面加载

Question

我有以下页面2下拉过滤器。当用户在下拉菜单1中选择和选项时，会显示下拉菜单2下的数百个选项列表供用户选择。尽管此解决方案有效，但首次访问时页面加载的负载非常重要。

有没有一种方法可以让用户在下拉菜单中选择一个选项时加载iframe，而不是在页面加载时一次全部加载iframe？

这是JSFiddle。任何帮助真的会被赞赏。

https://jsfiddle.net/wp9ke0td

感谢，

$(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

你有两个选择，以增加你的脚本的速度：在主选择使用AJAX改变

1. 负载孩子选择数据。

   更重要的是，您可以先加载并渲染页面。在全部加载后，启动加载（使用ajax）主选择选项，或者在用户单击它后加载主选择选项。

2. 使用vanillaJS代替jquery，你会惊讶地发现它是如何被禁食的。

Answer 2

下面是一个例子jsfiddle

第1步：保存选项数据键值列表。

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, 
} 

第2步： 通过代码设置你的选择选项（使用键值列表）。

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

第3步：取关键值列表，如果你不已经将其缓存。

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

步骤4： iframe的设置网址。

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