Rails 5 Div dynamische selectbox und Fern div Layout Ausgabe

Question

Ich baue aus einer App in Rails 5 Ruby 2.4.0 und mit Bootstrap 4 Alpha 6

ich eine dynamische selectbox haben, dass, wenn eine Auswahl lädt eine gemacht div unterhalb zeigt Informationen über dieses Element an, das Problem ist das Layout des div, Wenn ich auf eine Auswahl klicke, wird es richtig angezeigt, wenn ich auf die nächste Auswahl klicke, erscheint sie unter dem ersten ausgewählten Element.

Was ich zu erreichen bin, ist ein einzelnes div, das basierend auf der anfänglichen Geräteauswahl dynamisch geladen wird.

Ich bin mir nicht sicher, wie ich damit fortfahren soll und bin mit javaScript und AJAX ziemlich neu.

mein selecctbox:

<div class="form-group"> 
    <label for="deviceSelect">Select Your <%= @manufacturer.name.titleize %> Device</label> 
    <select class="form-control div-toggle" data-target=".device-names"> 
    <option>Select Device</option> 
    <% @devices.each do |device| %> 
     <option value="<%= device.id %>" data-show=".<%= device.device_name %>"><%= device.device_name.titleize %></option> 
    <% end %> 
    </select> 
</div> 

meine "dynamisch div":

<div class="device-names"> 
    <% @devices.each do |device_div| %> 
    <div class="<%= device_div.device_name %> invisible"> 
     <%= device_div.device_name %> 
    </div> 
    <% end %> 
</div> 

meine javascript:

<script type="text/javascript"> 
     $(document).on('change', '.div-toggle', function() { 
     var target = $(this).data('target'); 
     var show = $("option:selected", this).data('show'); 
     $(target).children().addClass('invisible'); 
     $(show).removeClass('invisible'); 
     }); 
     $(d 

ocument).ready(function() { 
    $('.div-toggle').trigger('change'); 
    }); 
</script> 

ich den Inhalt für jedes Gerät möchte zu laden, wo der Iconica-Text im Bild befindet, zumindest das ist mein Ende-Spiel.

Alle hier Hilfe wäre sehr dankbar! Vielen Dank im Voraus, bitte fragen Sie nach weiteren Informationen, wenn sie hier nicht berücksichtigt wurden.

Answer 1

so das Problem war die Bootstrap unsichtbare Klasse, änderte ich die Bootstrap-Klasse, um display: none; in meinem css und es produzierte das gewünschte Ergebnis.