html - 如何快速填充 Rails 中的 *data inter-dependent* 下拉菜单？

转载 作者：太空狗 更新时间：2023-10-29 16:00:01 24 4

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

问题是，这是许多单独的网络请求，在低带宽、网络问题等现实世界条件下。经常会出现严重影响用户体验的暂停，偶尔会导致失败。

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

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

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

最终，我认为这里的解决方案可能对大量应用程序和公司非常有用。这里的例子是几十个主要的汽车保险网站使用的车辆本身(他们现在都在进行多次调用)。为关系相关的下拉列表存储客户端数据的一般方法也可以映射到许多其他情况，例如在线购元素牌年模型。填充 sessionStorage 的后端框架也可以通过不同的后端框架完成。

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

似乎 sessionStorage 可能比基于 google 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("<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>

关于html - 如何快速填充 Rails 中的 *data inter-dependent* <select> 下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32856869/

24 4 0

文章推荐： java - 如何将 build.gradle 文件拆分为具有较小任务的文件

文章推荐： c - 使用 fopen 函数写入文件

文章推荐： android - 身份验证后 Firebase 权限被拒绝

文章推荐： C中的Python实例方法

• java - JFrame 中的 JPanel 中的 JScrollPane 中的 JTextPane

  我想做的是让 JTextPane 在 JPanel 中占用尽可能多的空间。对于我使用的 UpdateInfoPanel: public class UpdateInfoPanel extends JP

• java - JFrame 中的 JPanel 中的 JTextArea 中的 JScrollPane 出现问题

  我在 JPanel 中有一个 JTextArea，我想将其与 JScrollPane 一起使用。我正在使用 GridBagLayout。当我运行它时，框架似乎为 JScrollPane 腾出了空间，但

• ios - iOs Xcode 中的 UIViewController 中的 UIView 中的 UITableView

  我想在 xcode 中实现以下功能。 我有一个 View Controller 。在这个 UIViewController 中，我有一个 UITabBar。它们下面是一个 UIView。将 UITab

• sql - 与 SQL 中的 STUFF 等效的函数(MySQL 中的 GROUP_CONCAT/Oracle 中的 LISTAGG)

  有谁知道Firebird 2.5有没有类似于SQL中“STUFF”函数的功能？ 我有一个包含父用户记录的表，另一个表包含与父相关的子用户记录。我希望能够提取用户拥有的“ROLES”的逗号分隔字符串，而

• Mirth 中的 Json 解析或 Mirth 中的 Json 或 Mirth 中的 HL7 到 JSON

  我想使用 JSON 作为 mirth channel 的输入和输出，例如详细信息保存在数据库中或创建 HL7 消息。 简而言之，输入为 JSON 解析它并输出为任何格式。 最佳答案 var objec

• python - 如果文件 1 中的 A 列 = 文件 2 中的 A 列，则替换为文件 2 中的 B 列

  通常我会使用 R 并执行 merge.by，但这个文件似乎太大了，部门中的任何一台计算机都无法处理它! (任何从事遗传学工作的人的附加信息)本质上，插补似乎删除了 snp ID 的 rs 数字，我只剩

• Javascript 中的 HAML 中的 Javascript

  我有一个以前可能被问过的问题，但我很难找到正确的描述。我希望有人能帮助我。 在下面的代码中，我设置了varprice，我想添加javascript变量accu_id以通过rails在我的数据库中查找记

• HTML 中的 SVG 中的 HTML

  我有一个简单的 SVG 文件，在 Firefox 中可以正常查看 - 它的一些包装文本使用 foreignObject 包含一些 HTML - 文本包装在 div 中:

• ruby - Ruby 中的 If block 中的 "Or"

  所以我正在为学校编写一个 Ruby 程序，如果某个值是 1 或 3，则将 bool 值更改为 true，如果是 0 或 2，则更改为 false。由于我有 Java 背景，所以我认为这段代码应该有效:

• amazon-web-services - 如何从账户 A 中的 Lambda(VPC 中的 Lambda)调用账户 B(VPC 中的此 Lambda)中的 AWS Lambda 函数

  我做了什么: 我在这些账户之间创建了 VPC 对等连接 互联网网关也连接到每个 VPC 还配置了路由表(以允许来自双方的流量) 情况1: 当这两个 VPC 在同一个账户中时，我成功测试了从另一个 La

• php - 如何获取 column1 中的 value1 和 column2 中的 value2 但 column1 中的 value2 在 column2 中没有 value1 的行？

  我有一个名为 contacts 的表: user_id contact_id 10294 10295 10294 10293 10293 10294 102

• php - Magento 中的 foreach 中的 getChildHtml

  我正在使用 Magento 中的新模板。为避免重复代码，我想为每个产品预览使用相同的子模板。 特别是我做了这样一个展示: $products = Mage::getModel('catalog/pro

• protocols - Elixir 中的 "for"中的 "defimpl"实际上检查了什么？

  “for”是否总是检查协议(protocol)中定义的每个函数中第一个参数的类型？ 编辑(改写): 当协议(protocol)方法只有一个参数时，根据该单个参数的类型(直接或任意)找到实现。当协议(p

• javascript - PHP 中的 JavaScript 中的 PHP

  我想从我的 PHP 代码中调用 JavaScript 函数。我通过使用以下方法实现了这一点: echo ' drawChart($id); '; 这工作正常，但我想从我的 PHP 代码中获取数据，我使

• javascript - html 中的 html 中的 JavaScript

  这个问题已经有答案了: Event binding on dynamically created elements? (23 个回答) 已关闭 5 年前。 我有一个动态表单，我想在其中附加一些其他 h

• javascript - componentDidMount() 中的 .map 中的 setState

  我正在尝试找到一种解决方案，以在 componentDidMount 中的映射项上使用 setState。 我正在使用 GraphQL连同 Gatsby返回许多 data 项目，但要求在特定的 pat

• android - ScrollView 中的 View 中的 OnTouchListener

  我在 ScrollView 中有一个 View 。只要用户按住该 View ，我想每 80 毫秒调用一次方法。这是我已经实现的: final Runnable vibrate = new Runnab

• android - GetStringUTFChars 中的 dvmDecodeIndirectRef 中的 dvmAbort

  我用 jni 开发了一个 android 应用程序。我在 GetStringUTFChars 的 dvmDecodeIndirectRef 中得到了一个 dvmabort。我只中止了一次。 为什么会这

• android - Activity 中的 FragmentPagerAdapter 中的 RecyclerView

  当我到达我的 Activity 时，我调用 FragmentPagerAdapter 来处理我的不同选项卡。在我的一个选项卡中，我想显示一个 RecyclerView，但他从未出现过，有了断点，我看到

• android - Activity 中的 DialogFragment 中的 RecyclerView

  当我按下 Activity 中的按钮时，会弹出一个 DialogFragment。在对话框 fragment 中，有一个看起来像普通 ListView 的 RecyclerView。 我想要的行为是当

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

• c - 在位数组中找到第一个零
• linux - Unix 显示有关匹配两种模式之一的文件的信息
• 正则表达式替换多个文件
• linux - 隐藏来自 xtrace 的命令

滴滴打车优惠券免费领取

全站热门文章

• java中的集合ArrayList
• Svelte最新中文文档翻译（5）——基础标记
• Rust多线程中安全的使用变量
• 应用程序取得当前目录和退出
• 二进制与位操作
• React中的数据流管理
• 分布式系统学习10：分布式事务
• stdio.h的缓冲机制解析
• ReentrantLock实现机制
• SdcbChats技术博客：数据库ID选型的曲折之路-从Guid到自增ID，再到Guid

Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com