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

Question

用户需要选择一辆车.
我们在挑选汽车时会有几个下拉菜单,以便挑选年份,品牌,型号和子模型.最初我们不知道make/model/submodel的select选项使用什么,因为它们是相互依赖的.
一旦我们选择年份,我们使用ajax来发出查询ActiveRecord以填充make下拉列表的请求.
然后当我们选择make时,我们使用ajax来查询并填充模型下拉列表.然后,当我们选择模型时,我们使用ajax来查询并填充子模型下拉列表.

问题在于,这是很多单独的网络请求,并且在低带宽,网络问题等的现实条件下,通常存在严重影响用户体验并且偶尔导致故障的暂停.

哪些方法可以帮助避免所有这些网络请求.在那里,一种方法可以在客户端浏览器上存储所有数千个品牌模型组合？

目前,数据存储在通过Rails框架中的ActiveRecord访问的sql数据库中.每个下拉选项都会导致另一个查询,因为在您知道年份之前,您无法显示填充和显示make,并且在您知道make之前无法填充并显示模型.对于子模型也是如此(尽管我为了简单起见省略了本文其余部分的子模型!).

会话(http://simonsmith.io/speeding-things-up-with-sessionstorage/)是否可以存储10,000个组合的JSON数据？我看到sessionStorage通常可以依赖至少5MB(5,200,000字节),这样每条记录就能得到5200000/10000 = 520字节.可能够吗？如果这对于会话和页面持续存在,那么在许多情况下我们实际上可以在前一页上启动它,如果有时间完成,我们将不需要在相关(下一页)页面上进行外部调用.我们需要偶尔或按需更新数据,因为定期添加新年制造模型(一年数次).

最终,我认为这里的解决方案对大量应用程序和公司非常有用.这里举例说明了几十家主要的汽车保险网站(现在都在进行多次通话)所使用的车辆本身.存储客户端数据以用于关系依赖性下降的一般方法也可以用于许多其他情况,例如品牌年模型的在线购物.填充sessionStorage的后端框架也可以通过不同的后端框架完成.

另一种选择可能是尝试google的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>