javascript - 根据所选下拉列表更改标签 [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 的字段中显示所选项目的类型和编号。我希望在用户选择下拉列表后立即在 View 中呈现。我该怎么做？

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 数组中查找该值，该数组将用于从中提取 networkType 和 networkNumber network_details 数组中的相应位置。

现在，networks 和 network_details 尚未定义，因此您还需要在 View 代码中包含一段 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)，这些将自动包含在 Assets 管道中。