Ändern Sie das Etikett basierend auf ausgewählten Dropdown [Ruby on Rails 4.2]

Question

Ich habe eine Tabelle namens network es hat die Spalte type und number.

Ich benutze diese select_tag eine Liste aller meiner Netzwerknamen zu erhalten:

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

Ich habe auch 2 Beschriftungsfelder, die ich mit Informationen dynamisch füllen wollen:

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

Wenn der Benutzer wählt ein Netzwerk aus der Dropdown-Liste der Netzwerknamen aus, ich möchte den Typ und die Nummer des ausgewählten Elements in den Feldern NetworkType und NetworkNumber anzeigen. Ich möchte, dass dies in der Ansicht gerendert wird, unmittelbar nachdem der Benutzer ein Dropdown-Menü ausgewählt hat. Wie würde ich das tun?

Answer 1

Diesen Javascript in Ihrem app/assets/javascripts/network.js Datei:

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

Dies wird ein Event-Handler registrieren, die wirkt, wenn die Netzwerkauswahl geändert wird. Der Handler erhält den neuen ausgewählten Wert und sucht den Wert im Array networks, mit dem die Werte networkType und networkNumber von der entsprechenden Position im Array network_details abgerufen werden.

nun an dieser Stelle, networks und network_details haben nicht definiert, so dass Sie auch einen Ausschnitt von Javascript in Ihrem View-Code enthalten benötigen, um den dynamisch zu tun:

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

der Javascript-Code verwendet jQuery, also müssen Sie sicherstellen, dass jQuery im Projekt konfiguriert ist. Überprüfen Sie, dass diese Linien gibt es in der app/assets/javascripts/application.js Datei:

//= require jquery 
//= require jquery_ujs 

Diese Linien sind jQuery und jQuery UJS (unaufdringlich Javascript) für das Projekt, und diese automatisch in der Asset-Pipeline enthalten sein wird.