0

我有一个State模型 whichhas_many :cities和一个city模型 which belongs_to :state。我想显示一个州列表，然后当用户点击一个州时，进行 ajax 调用以显示下面属于该州的城市。

我确信这可以使用 jQuery 来完成，并且没有部分，我只是在想出一些示例和解决方案时遇到了麻烦。

这是我希望它首先看起来的样子： - 阿拉巴马州 - 阿拉斯加州 - 阿肯色州 - 等等。

然后，如果有人点击“阿拉斯加”，列表将更新为： - 阿拉巴马州 - 阿拉斯加州 - 安克雷奇 - 费尔班克斯 - 朱诺 - 阿肯色州

任何帮助将非常感激！

编辑

好的，所以我一直在驱逐 jQuery 我想出了以下代码。我不能让各州单独展示他们各自的城市。照原样，如果您单击任何一个州，它只会显示第一个州的城市。

这是代码：

<script>
$(function(){
    $('#city').hide();
$('.toggle').toggle(function(){
    $('#city').fadeIn(100);
},
function(){
    $('#city').fadeOut(100);
});
});

</script>
<%= render "layouts/header"%>

<table class="state_list">
<% @states.in_groups_of(1, false).each do |state| %>
  <tr>
<% for state in state %>
<td>    
<div class="toggle"><h3><%= state.name %><br /></h3></div>
    <% @cities.each do |city| %>
        <% if city.state.id == state.id %>
                    <div id="city"><%= link_to city.name, cities_path(:city_id => city.id) %> (<%= city.posts.where(:published => true).count %>)<br />
            <% end %>
        <% end %>   
</div>
    </td>
        <% end %>
  </tr>
<% end %>
</table>

再次感谢任何反馈！

4

1 回答 1

0

StackOverflow 答案

我知道了！

这是我做的参考...另外，如果您看到更好的方法，请告诉我。

<table class="state_list">
<% @states.in_groups_of(1, false).each do |state| %>
<tr>
<% for state in state %>
<td>    
    <script>
    $(function(){
            $('#city-<%=state.id%>').hide();
        $('#toggle-<%=state.id%>').toggle(function(){
            $('#city-<%=state.id%>').fadeIn(100);
        },
        function(){
            $('#city-<%=state.id%>').fadeOut(100);
        });
    });

    </script>
<div id="toggle-<%=state.id%>"><h3><%= state.name %><br /></h3></div>
    <% @cities.each do |city| %>
        <% if city.state.id == state.id %>
                    <div id="city-<%=state.id%>"><%= link_to city.name, cities_path(:city_id => city.id) %> (<%= city.posts.where(:published => true).count %>)<br />
            <% end %>
        <% end %>   
</div>
</td>
    <% end %>
  </tr>
<% end %>
</table>

一切都像我希望的那样工作！

于 2012-04-11T14:51:03.173 回答