下拉菜單加載選擇，而不是頁面加載

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