Rails＆Jquery：根據選定狀態選項篩選城市

Question

無法弄清楚如何使用JQuery filter（）方法和rails基於選定狀態的ID來過濾城市。已經觀看Railscasts＃88定期和修改，但我沒有使用optgroup，所以他推薦的方式不起作用。我正在尋找的是在下面的filter（）方法調用中放置什麼。我懷疑它應該是這樣的：

.filter("select label='job_state_id' ")) 

不管怎麼說，這是JQuery的：

$(document).ready(function(){ 
    // grab all cities for later filtering 
    cities = $('#job_city_id').html(); 
    $('#job_state_id').change(function(){ 
     state = $('#job_state_id option:selected').text(); 
     // can't figure out how to only display cities of the selected state, hence filter() is blank below 
     options = $(cities).filter().text(); 
     $('#job_city_id').html(options); 
    }); 
}); 

Rails的模型

class Job < ActiveRecord::Base 
    belongs_to :state 
    belongs_to :city 

class State < ActiveRecord::Base 

    has_many :citys 
    has_many :jobs 

class City < ActiveRecord::Base 
    belongs_to :state 
    has_many :jobs 

Rails的形式

<div class="field" > 
     <%= f.label :state_id %> 
     <%= f.collection_select :state_id, State.all, :id, :name, {:prompt => '-- Select a US State --'} %> 
</div> 
    <div class="field"> 
    <%= f.label :city_id %> 
    <%= f.collection_select :city_id, City.all, :id, :name, {:prompt => '-- Select a US City --'} %> 

和HTML

<div class="field" > 
     <label for="job_state_id">State</label> 
     <select name="job[state_id]" id="job_state_id"><option value="">-- Select a US State --</option> 
<option value="1">California</option> 
<option value="2">Nevada</option> 
<option value="3">Oregon</option> 
<option value="4">Alaska</option></select> 
</div> 
    <div class="field"> 
    <label for="job_city_id">City</label> 
    <select name="job[city_id]" id="job_city_id"><option value="">-- Select a US City --</option> 
<option value="1">Los Angeles</option> 
<option value="2">San Francisco</option> 
<option value="3">Portland</option></select> 
</div> 

任何幫助正確的方向將不勝感激！

丹

Answer 1

您不必在視圖足夠的信息，因爲它是目前能夠做你想做的......沒有什麼的，可以用來推斷認爲，「洛杉磯」在「加利福尼亞州」。

你可以用ajax調用...當#job_state_id變化發送一個請求到rails應用程序和rails應用程序將返回一個新的選項列表。

另外，您可以創建具有多個內部的div隱藏DIV，包含由狀態ID（每格）分組的所有城市選項，然後複製與選擇狀態的div的HTML ...

<div style=style="display: none;"> 
    <% current_state_id = nil %> 
    <% City.order_by(:state_id).each do |city| %> 
    <% if city.state_id != current_state_id %> 
     <% if current_state_id %> 
     </div> 
     <% end %> 
     <% current_state_id = city.state_id %> 
     <div id='<%=current_state_id %>'> 
    < % end %> 
    <option value="<%= city.id %>"><%=city.name%></option> 
    <% end %> 
    <% if current_state_id %> 
    </div> 
    <% end %> 
</div> 

然後在你的代碼中當狀態發生變化時...

var state = $('#job_state_id option:selected').val(); 
$('#job_city_id').html($('#' + state).html());