html – 如何在轨道中快速填充*数据相互依赖的*下拉列表？

用户需要选择一辆车.
我们在挑选汽车时会有几个下拉菜单,以便挑选年份,品牌,型号和子模型.
最初我们不知道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的后端框架也可以通过不同的后端框架完成.

另一个选择可能是在https://www.youtube.com/watch?v=S1AUIq8GA1k尝试谷歌的lovefield – https://github.com/google/lovefield更多
它是开源的,适用于ff,chrome,IE,Safari等.

似乎sessionStorage可能比我们(相当大的)业务更好,而不是基于谷歌100天开发的东西 – 尽管它是开源的.

最佳答案

您好,您可以创建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("