Rails& Jquery:根据选定的州选项过滤城市

时间:2016-11-29 16:43:11

标签: jquery ruby-on-rails ruby

无法弄清楚如何使用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>

非常感谢任何正确方向的帮助!

1 个答案:

答案 0 :(得分:1)

您在视图中没有足够的信息,因为它目前能够做您想做的事情......视图中没有任何内容可用于推断“洛杉矶”在“加利福尼亚”中。

您可以通过ajax调用执行此操作...当#job_state_id更改向rails应用程序发送请求时,rails应用程序将返回新的选项列表。

或者你可以创建一个带有多个内部div的隐藏div,包含按州id分组的每个城市选项(每个div),然后复制与所选状态相关的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());