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

我有一张名为network的表，其列type和number。基于选定的下拉列表更改标签[Ruby on Rails 4.2]

我用这个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的字段中显示所选项目的类型和编号。我希望在用户选择下拉菜单后立即在视图中渲染。我将如何做到这一点？

来源

2016-05-24 chinm3

将这个中的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）的项目，而这些将被自动包含在资产管道。

来源

2016-05-24 16:33:09

看着HTML源代码页面，它似乎显示正确的网络和network_details，它以json格式显示网络类型和数量，但似乎并没有在span标签中应用这些值。 – chinm3

在js控制台中获取以下错误，TypeError：network_details [network_index]未定义 – chinm3

@ chinm3如果您可以将'console.log（“Value =”，value）;'放在'var value = $（this ）.val（）;'在Javascript中的行，并让我知道它在控制台中显示的内容，这将帮助我找出为什么它不起作用。 –

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

回答

相关问题