如何在轨道中快速填充*数据相互依赖* <select>下拉列表？

Question

用户需要选择一辆车。 我们在挑选汽车时会有几个下拉菜单，以便挑选年份，品牌，型号和子模型。 最初，我们不知道如何使用make / model / submodel的select选项，因为它们是相互依赖的。 一旦我们选择年份，我们使用ajax来发出查询ActiveRecord以填充make下拉列表的请求。 然后当我们选择make时，我们使用ajax来查询并填充模型下拉列表。 然后，当我们选择模型时，我们使用ajax来查询并填充子模型下拉列表。 问题在于，这是很多单独的网络请求，并且在低带宽，网络问题等的现实条件下，通常存在严重影响用户体验并且偶尔导致故障的暂停。 哪些方法可以帮助避免所有这些网络请求。在那里，一种方法可以在客户端浏览器上存储所有数千个品牌模型组合？ 目前，数据存储在通过Rails框架中的ActiveRecord访问的sql数据库中。每个下拉选项都会产生另一个查询，因为您不能显示填充和显示制作直到您知道年份，并且您不能填充并显示模型直到您知道make。对于子模型也是如此（尽管为了简单起见，我已经从这篇文章的其余部分省略了子模型！）。 会话（http://simonsmith.io/speeding-things-up-with-sessionstorage/）是否可以存储10,000个组合的JSON数据？我看到sessionStorage通常可以依赖至少5MB（5,200,000字节），这样每条记录就能得到5200000/10000 = 520字节。可能够吗？如果这对于会话和页面持续存在，那么在很多情况下我们实际上可以在前一页上启用它，如果有时间完成，我们在相关（下一页）页面上根本不需要外部调用。 我们需要偶尔或按需更新数据，因为定期添加新年制造模型（一年数次）。 最终，我认为这里的解决方案对大量应用程序和公司非常有用。这里举例说明了几十家主要的汽车保险网站（现在都在进行多次通话）所使用的车辆本身。存储客户端数据以用于关系依赖性下降的一般方法也可以用于许多其他情况，例如品牌年模型的在线购物。填充sessionStorage的后端框架也可以通过不同的后端框架完成。 另一种选择可能是试试谷歌的Lovefield - https://github.com/google/lovefield更多信息，请访问https://www.youtube.com/watch?v=S1AUIq8GA1k 它是开源的，适用于ff，chrome，IE，Safari等。 似乎sessionStorage可能比我们（相当大的）业务更好，而不是基于谷歌100天开发的东西 - 尽管它是开源的。

Answer 1

您好，您可以创建JSON对象 对于所有细节，基于所选的值，您可以循环数组并填充值。让我

var cardetail = [{
  "name": "MARUTI",
  "model": [{
    "name": "SWIFT",
    "year": ["2005", "2006", "2008"]
  }, {
    "name": "ALTO",
    "year": ["2009", "2010", "2011"]
  }]
}, {
  "name": "Hundai",
  "model": [{
    "name": "I20",
    "year": ["2011", "2012", "2013"]
  }, {
    "name": "I20",
    "year": ["2013", "2014", "2015"]
  }]
}];

var currentCumpany = null;
var currentModel = null;
$(document).ready(function() {
 $("#company").append("<option value=''>Select Company</option>");
  for (i = 0; i < cardetail.length; i++) {
    $("#company").append("<option value='" + cardetail[i].name + "'>" + cardetail[i].name + "</option>");
  };

  $("#company").change(function() {

    for (i = 0; i < cardetail.length; i++) {
      if (cardetail[i].name == $("#company").val()) {
        currentCumpany = cardetail[i];
      }
    };
     $("#model").html("");
    for (i = 0; i < currentCumpany.model.length; i++) {
      $("#model").append("<option value='" + currentCumpany.model[i].name + "'>" + currentCumpany.model[i].name + "</option>");
    };
  });
   $("#company").change(function() {

    for (i = 0; i < cardetail.length; i++) {
      if (cardetail[i].name == $("#company").val()) {
        currentCumpany = cardetail[i];
      }
    };
     $("#model").html("");
    for (i = 0; i < currentCumpany.model.length; i++) {
      $("#model").append("<option value='" + currentCumpany.model[i].name + "'>" + currentCumpany.model[i].name + "</option>");
    };
  });
  

   $("#model").change(function() {

    
     
    for (i = 0; i < currentCumpany.model.length; i++) {
      
      if (currentCumpany.model[i].name == $("#model").val()) {
        currentModel = currentCumpany.model[i];
      }
      
    };
     
     
     $("#year").html("");
     
    for (i = 0; i < currentModel.year.length; i++) {
      $("#year").append("<option value='" + currentModel.year[i] + "'>" + currentModel.year[i] + "</option>");
    };
  });
  
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="company"></select>
<select id="model"></select>
<select id="year"></select>

Answer 2

首先，除非必要的带宽过于昂贵，否则您可以想象检查缓存，然后在用户选择一年并缓存它时立即（甚至在此之前）开始请求流行的品牌/模型/子模型。现在浏览器甚至还有一个完整的RDBMS（完全披露：它的新内容，我还没玩过它），它位于indexDB之上。

在挑选哪些预加载方面，您可以根据生产的单位，销售的单位，汽车和驾驶员杂志排名，数据挖掘您的实际用户＆＃39;请求，等等。

我认为从用户体验的角度来看，你至少应该缓存用户实际发出的请求，并提供加载选项，以便直接跳回到他们搜索的去年/ make / model而不是让他们每次访问都进入新鲜。预装大众汽车只会让事情变得更容易。您希望通过预测分析特定用户可能搜索的内容来达到您的团队技能/预算/时间限制。

我意识到这本身并不是完整的答案，我不确定问题是否有一个（例如＆＃39;使用此策略/框架/库而你所有的问题都会神奇地消失！它甚至会制作出一个julienned fries！＆＃39;）。但是如果遇到这种问题，我首先想到的是如何更快地将更多（希望是相关的）数据提供给客户 ，这有望转化为更快（在UX意义上）快速的。）

我还建议您在json文件中使用该流行数据进行请求，而不是每次都必须访问Rails / ActiveRecord / Database服务器。仅这一点就可以减少响应时间的宝贵时间（更不用说那些机器上的使用负载）。

它不像数据真的发生了变化，2009年的丰田Rav 4与2009年的规格相同。