2014-02-17 78 views
0

我有一個大的哈希像這樣擁有車輛的品牌和型號的更新動態選擇下拉值:從哈希

makes_models = {「AM General公司」:「悍馬」],「極品」 :「IL」,「ILX Hybrid」,「Integra」,「Legend」,「MDX」,「NSX」,「RDX」,「RL」,「RLX」,「RSX」, 「 SLX「,」TL「,」TLX「,」TSX「,」TSX Sport Wagon「,」Vigor「,」ZDX「],」Alfa Romeo「:[」4C「],」Aston Martin「:[ 「奧迪」:「DB9」「DBS」Rapide Rapide S V12 Vanquish V12 Vantage V8 Vantage Vanquish 「Virage」 「100」,「200」,「80」,「90」,「A3」,「A3 e-tron」,「A4」, 「A5」,「A6」 A7,A8,Cabriolet,Coupe,Q1,Q3,Q5,Q7, 「R8」,「RS4」,「RS5」,「RS6 「」,「RS」,「S3」,「S4」,「S5」,「S6」,「S7」, 「S8」「SQ5」「TT」「TT RS」「TTS」 V8" ,‘全能’,‘全能 四驅車’]}

我有一個選擇,讓你選擇模型的哈希鍵:

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

我有jQuery來更新模型選擇根據選定的品牌:

$('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> 

的問題是,選擇只返回在makes_models哈希的最後一個值。因此,例如,如果我選擇:謳歌,那麼模型選擇更新,只顯示:ZDX

screenshot

  1. 我該如何解決這個問題jQuery的?
  2. 他們是一個簡單的rails/jQuery解決方案用於從哈希中生成動態選擇框?

回答

0

我解決我自己的問題: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。謝謝。

0

考慮數據結構在這裏:

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就此別過,只是定義化妝功能一個JavaScript函數,獲取所選模型,並將其傳遞給make函數。輸出將是該模型的一個數組,然後您可以將其作爲下一個選擇框的html選項傳入。