Question

我有以下页面，其中包含2个下拉过滤器。当用户在下拉列表1中选择并选项时，将显示下拉2下的数百个选项列表供用户选择。虽然此解决方案有效，但首次访问时页面加载会非常负载。

有没有办法让用户在下拉列表中选择一个选项时加载iframe，而不是在页面加载时一次性加载所有iframe？

这是一个JSFiddle。任何帮助都会非常感激。

谢谢，

$(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在主选择上加载子选择数据。

更重要的是，您可以先加载并渲染页面。全部加载后，然后启动加载（使用ajax）主选项，或者在用户点击后加载主选项。
使用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);
  }
}

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

2 个答案: