从哈希中更新动态选择下拉值

Question

我有一个像这样的大型哈希，它有车辆的品牌和型号：

  

makes_models = {＆＃34; AM General＆＃34;：[＆＃34; Hummer＆＃34;]，＆＃34; Acura＆＃34;：[＆＃34; CL＆＃34;，＆＃34; ILX＆＃34;，＆＃34; ILX   Hybrid＆＃34;，＆＃34; Integra＆＃34;，＆＃34; Legend＆＃34;，＆＃34; MDX＆＃34;，＆＃34; NSX＆＃34;，＆＃34; RDX＆＃34;， ＆＃34; RL＆＃34;，＆＃34; RLX＆＃34;，＆＃34; RSX＆＃34;，   ＆＃34; SLX＆＃34;，＆＃34; TL＆＃34;，＆＃34; TLX＆＃34;，＆＃34; TSX＆＃34;，＆＃34; TSX Sport Wagon＆＃34;，＆＃34; ; Vigor＆＃34;，＆＃34; ZDX＆＃34;]，＆＃34; Alfa   罗密欧＆＃34;：[＆＃34; 4C＆＃34;]，＆＃34;阿斯顿马丁＆＃34;：[＆＃34; DB7＆＃34;，＆＃34; DB9＆＃34;，＆＃34; DBS＆ ＃34;，＆＃34; Rapide＆＃34;，＆＃34; Rapide   S＆＃34;，＆＃34; V12 Vanquish＆＃34;，＆＃34; V12 Vantage＆＃34;，＆＃34; V8 Vantage＆＃34;，＆＃34; Vanquish＆＃34;，   ＆＃34; Virage＆＃34;]，＆＃34;奥迪＆＃34;：[＆＃34; 100＆＃34;，＆＃34; 200＆＃34;，＆＃34; 80＆＃34;，＆＃34 ; 90＆＃34;，＆＃34; A3＆＃34;，＆＃34; A3 e-tron＆＃34;，＆＃34; A4＆＃34;，   ＆＃34; A5＆＃34;，＆＃34; A6＆＃34;，＆＃34; A7＆＃34;，＆＃34; A8＆＃34;，＆＃34; Cabriolet＆＃34;，＆＃34; Coupe＆ ＃34;，＆＃34; Q1＆＃34;，＆＃34; Q3＆＃34;，＆＃34; Q5＆＃34;，＆＃34; Q7＆＃34;，   ＆＃34; R8＆＃34;，＆＃34; RS 4＆＃34;，＆＃34; RS 5＆＃34;，＆＃34; RS 6＆＃34;，＆＃34; RS 7＆＃34;，＆ ＃34; S3＆＃34;，＆＃34; S4＆＃34;，＆＃34; S5＆＃34;，＆＃34; S6＆＃34;，＆＃34; S7＆＃34;，   ＆＃34; S8＆＃34;，＆＃34; SQ5＆＃34;，＆＃34; TT＆＃34;，＆＃34; TT RS＆＃34;，＆＃34; TTS＆＃34;，＆＃34; V8＆＃34;，＆＃34; allroad＆＃34;，＆＃34; allroad   QUATTRO＆＃34;]}

我有一个select，可以让你选择模型的哈希键：

<%= vehicle.select(:make, options_for_select(["AM General", "Acura", ...] )) %>

我有jQuery根据所选的make更新模型选择：

$('select#quote_vehicles_make').change(function() {
    $.each(models[$(this).val()], function( idx, value ) {
      $('select#quote_vehicles_models').html("<option>" + value + "</option>");
    });
});

模特选择：

<select id="quote_vehicles_models">
  <option>...</option>
</select>

问题是select只返回makes_models哈希中的最后一个值。因此，例如，如果我选择： Acura ，则模型会选择更新并仅显示： ZDX

1. 如何修复此jQuery？
2. 他们是一个简单的rails / jQuery解决方案，用于从哈希生成动态选择框吗？

Answer 1

我解决了自己的问题：jQuery：

$('select#quote_vehicles_make').change(function() {
  $('select#quote_vehicles_models').empty();
    $.each(models[$(this).val()], function( idx, value ) {
      $('select#quote_vehicles_models').append("<option>" + value + "</option>");
    });
});

如果存在Rails导向解决方案仍然感兴趣。感谢。

Answer 2

在这里考虑数据结构：

def make
     {"AM General":["Hummer"], "Acura":["CL", "ILX", "ILX Hybrid", "Integra", "Legend", "MDX",
        "NSX", "RDX", "RL", "RLX", "RSX", "SLX", "TL", "TLX", "TSX", "TSX Sport Wagon", "Vigor", "
        ZDX"], "Alfa Romeo":["4C"], "Aston Martin":["DB7", "DB9", "DBS", "Rapide", "Rapide S", "V12
        Vanquish", "V12 Vantage", "V8 Vantage", "Vanquish", "Virage"], "Audi":["100", "200", "80", 
        "90", "A3", "A3 e-tron", "A4", "A5", "A6", "A7", "A8", "Cabriolet", "Coupe", "Q1", "Q3", 
        "Q5", "Q7", "R8", "RS 4", "RS 5", "RS 6", "RS 7", "S3", "S4", "S5", "S6", "S7", "S8", "SQ5",
        "TT", "TT RS", "TTS", "V8", "allroad", "allroad quattro"]}[model]
end

然后你可以为每辆车制作一个模型列表，如：

make[@vehicle.model]

您也可以使用jquery执行此操作，只需将make函数定义为javascript函数，获取所选模型，并将其传递给make函数。输出将是该模型的一个品牌数组，然后您可以将其作为下一个选择框的html选项传入。