ドロップダウンメニューロード時の選択、ページロードでない

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

あなたのスクリプトの速度を上げるために2つのオプションがあります。

1. は、負荷の子は、Ajaxを使用して変更]を選択し、メインのデータを選択します。

   さらに、ページを読み込んでレンダリングすることもできます。すべてがロードされた後、（ajaxを使用して）メイン選択オプションをロードするように開始するか、メイン選択オプションをユーザーがクリックした後にロードすることができます。

2. jqueryの代わりにvanillaJSを使用すると、あなたはどのように断食されているのでしょうか？

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：インラインフレームの設定URL。

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