Html 如何快速填充rails中的*数据相互依赖*下拉列表？

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

问题在于，这是大量独立的网络请求，在低带宽、网络问题等现实世界条件下。通常会出现暂停，严重影响用户体验，偶尔会导致故障

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

目前，数据存储在通过Rails框架中的ActiveRecord访问的sql数据库中。每个下拉选择都会导致另一个查询，因为在了解年份之前，您无法显示“填充”和“显示制作”，而在了解制作之前，您无法填充和显示模型。子模型也是如此，不过为了简单起见，我在本文的其余部分省略了子模型

对于10000个组合，JSON数据的会话存储是可能的吗？我发现sessionStorage通常可以有至少5MB5200000字节，因此每个记录有5200000/10000=520字节。可能够了吧？如果这种情况在会话中和跨页面持续存在，那么在许多情况下，我们实际上可以在上一页启动，如果有时间完成，我们就根本不需要在相关的下一页上进行外部调用。 我们需要偶尔或根据需要更新这些数据，因为每年都会定期添加几次新年模型

最终，我认为这里的解决方案可能对大量应用程序和公司非常有用。这里的例子是，几十家主要的汽车保险网站都在使用自己挑选的汽车，他们现在都在打多个电话。存储客户机端数据以进行依赖关系的sdropdown的一般方法也适用于许多其他情况，例如为make brand year model进行在线购物。用于填充会话存储的后端框架也可以通过不同的后端框架来完成

另一个选择可能是尝试谷歌的Lovefield——更多信息请访问 它是开源的，适用于ff、chrome、IE、Safari等

---

似乎sessionStorage对于我们可观的业务来说可能比基于google 100天开发的东西更好——尽管它是开源的。

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

var cardetail=[{ 姓名：马鲁蒂， 型号：[{ 姓名:SWIFT,， 年份：[2005、2006、2008] }, { 姓名：阿尔托， 年份：[2009、2010、2011] }] }, { 姓名：浑岱， 型号：[{ 姓名：I20， 年份：[2011、2012、2013] }, { 姓名：I20， 年份：[2013、2014、2015] }] }]; var currentCumpany=null； var currentModel=null； $document.readyfunction{ $company.appendSelect company； 对于i=0；i首先，除非所需的带宽过于昂贵，否则可以想象，您可以检查缓存，然后在用户选择一年并缓存它之前，尽快或甚至在用户选择一年之前开始请求流行品牌/型号/子型号。现在甚至有一个完整的浏览器完全公开：它是新的，我没有太多地使用它，它位于indexDB之上

在选择预加载哪些方面，你可以根据生产的单位、销售的单位、汽车和驾驶员杂志排名、数据挖掘你实际用户的请求等等来选择

我是第一流的 从用户体验的角度来看，您至少应该缓存用户实际发出的请求，并提供一个加载选项，以便直接跳回他们搜索的去年/make/model，而不是让他们每次访问都重新输入。预装受欢迎的车辆只会让事情变得更容易。您希望对给定用户可能搜索的内容进行预测性分析的程度取决于您的团队技能/预算/时间限制

我意识到这本身并不是一个完整的答案，我不确定如前所述，这个问题是否有一个答案，例如“使用这个策略/框架/库，你所有的问题都会神奇地消失！”！它甚至可以做炸薯条。但是，如果遇到这种问题，我的第一个想法是如何更快地向客户机获取更多相关数据，这在快速用户体验（UX）的意义上有望转化为更快

我还建议您在json文件中请求这些流行数据，而不是每次都要点击Rails/ActiveRecord/Database服务器。仅此一项就可以节省宝贵的毫秒响应时间，更不用说那些机器上的使用负载了

---

数据并不是真的改变，2009年丰田Rav 4的规格与2009年相同。

这不是OP想要的，因为他明确指出：最初我们不知道品牌/车型/子车型的选择选项使用什么，因为它们是相互依赖的。在您的示例中，无法选择不首先选择公司的年份。确定。最初默认情况下，您希望显示所有年份和模型？好的，您的过程将类似于选择年份=>然后选择模型=>选择子模型，对吗？@Michaeldurrent请检查JSFIDLE，让我知道它对您有用。@Michaeldurrent这是更新的脚本，我已经完成了会话存储评论，我建议您使用谷歌的Lovefield提供了巨大的数据存储能力。选择查询。查询过滤和所有这些都很好。如果我有时间，那么我喜欢实现它。后端使用什么语言，例如：c.NET、php、jsp？或者，这是纯HTML和javascript？如果在一开始就加载sh*t-load数据，那么用户界面的反应时间会有一点提高，这可能会导致应用程序启动时出现明显的延迟，而且大部分数据甚至可能不会被使用……我认为这是一个坏主意。相反，我更愿意使用某种形式的指示器，告诉用户新数据是根据他们与UI的交互来获取的。加上一个@CBroe，是的，当我们在办公室工作时，使用漂亮的高速直接接线，这是真的，所以这不值得。然而，在现实世界中，低带宽的无线数据连接，比如我经常在不在家时遇到的延迟，会对我们和其他用户界面造成严重破坏。字段被跳过，工作流被破坏。UI测试间歇性失败。这是一个真正的问题。移动数据连接往往不仅带宽低，而且往往对数据量也有限制——我担心您在这里为了获得更多的数据下载而牺牲了一点便利。当你说用户将选择“年份、品牌、车型和子车型”时，听起来好像他们在寻找一辆非常特定的汽车的相关数据，或者最多是一些数据——而且从经济角度来看，提前加载所有可能组合的数据听起来非常糟糕。必须为额外的数据量付费也是如此“真实世界”在很多情况下，正如你所提到的速度问题。作为一个用户，如果你浪费了资源，我想我会很生气，我必须为此付费。可能所有JSON都使用浏览器上的会话存储？取决于你希望数据保持多长时间。如果你想让它比当前的se更持久，你可以使用localStorageSession。如果您真的想在客户端上缓存数据负载，您可以一直访问indexDB。问题是，indexDB将数据取回：它不支持人们希望的SQL，因此我链接到了上面的库。请记住，浏览器有不同的限制：~5MB用于本地/会话存储，~50MB用于indexDB。我希望ng使用另一个登录页的初始加载和/或此页的初始加载。新用户通常需要几秒钟才能看到下拉列表并开始浏览。每个页面上都有2-5秒钟。最好使用这段时间填充年份生成模型数据。年份是一个固定的年份列表，而用户看到页面，找到并选择选择器，json数据加载可以在后台进行，这是我的想法。无论使用哪种解决方案，最小化网络流量都将是一个关键组件，因为在低带宽环境下，其中一个要求是更好的功能。我不会将json至少不是全部嵌入到i中初始页面加载，因为这样你就不知道缓存中是否已经有了它 我最终会消耗带宽来重新下载本可以缓存的内容。我将设置初始渲染所需的任何资产，并拥有第一个执行开始获取JSON的js。您还可以使用混合策略，在初始页面中嵌入一些JSON，在其余页面中嵌入AJAX。