選択したドロップダウンに基づいてラベルを変更します[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

あなたapp/assets/javascripts/network.jsファイルにこのJavascriptを置く：

$(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); 
    }); 
}); 

これは、ネットワーク選択が変更されたときに行動するイベントハンドラを登録します。ハンドラは新しい選択された値を取得し、networkTypeとnetworkNumberをnetwork_details配列の対応する位置から引っ張るために使用されるnetworks配列の値を検索します。

さて、この時点で、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がプロジェクトで設定されていることを確認する必要があります。これらの行は、プロジェクトのためのjQueryとjQueryのUJS（控えめなJavascriptを）が含まれ、これらは自動的にアセットパイプラインに含まれます

//= require jquery 
//= require jquery_ujs 

：これらの行はapp/assets/javascripts/application.jsファイルに存在していることを確認してください。