根据选定的下拉列表更改标签 [Ruby on Rails 4.2]

Question

我有一个名为network的表，它有列type和number。

我使用此select_tag获取所有网络名称的列表：

<%= select_tag('NetworksList', options_from_collection_for_select(Network.all, :id, :name))%>

我还有 2 个标签字段，我想动态填充信息：

<p>Network Type: <%= content_tag('span', "", id: 'NetworkType') %></p>
<p>Network Number: <%= content_tag('span', "", id: 'NetworkNumber') %></p>

当用户从网络名称下拉列表中选择网络时，我想在名为 NetworkType 和 NetworkNumber 的字段中显示所选项目的类型和编号。 我希望在用户选择下拉列表后立即在视图中呈现。 我该怎么做？

Answer 1

把这个 Javascript 放在你的app/assets/javascripts/network.js文件中：

$(document).ready(function() {
    $("#network_network_list").change(function() {
        var value = +$(this).val();
        var network_index = $.inArray(value, networks);
        var networkType = network_details[network_index][0];
        var networkNumber = network_details[network_index][1];
        $("#NetworkType").text(networkType);
        $("#NetworkNumber").text(networkNumber);
    });
});

这将注册一个事件处理程序，该处理程序将在网络选择更改时起作用。 处理程序将获取新的选定值并在 networks 数组中查找该值，该值将用于从 network_details 数组中的相应位置拉取networkType和networkNumber。

现在，在这一点上，networks和network_details尚未定义，因此您还需要在视图代码中包含一段 Javascript 才能动态执行此操作：

<script>
var networks = <%= raw(@networks.map(&:id).to_json) %>;
var network_details = <%= raw(@networks.map {|network| [network.type, network.number] }.to_json) %>;
</script>

Javascript 代码使用 jQuery，因此您需要确保在项目中配置 jQuery。 检查app/assets/javascripts/application.js文件中是否存在以下行：

//= require jquery
//= require jquery_ujs

这些行包括项目的jQuery和jQuery UJS（不显眼的Javascript），这些将自动包含在资产管道中。