In derselben Zeile beschriften und auswählen

Question

Wie kann ich bei diesem Code mein Label und meine Auswahl in die gleiche Zeile setzen?

<div class="form-group"> 
    <div> 
    <label>Filtrar por Categoria:</label> 
     <div id="select-categories"></div> 
    </div> 
</div> 

Javascript:

$("#select-categories").each(function (i) { 
        var select = $('<select class="form-control"><option value=""></option></select>') 
         .appendTo($(this).empty()) 
         .on('change', function() { 
          table.column([2]) 
           .search($(this).val()) 
           .draw(); 
         }); 

        table.column([2]).data().unique().sort().each(function (d, j) { 
         select.append('<option value="'+d+'">'+d+'</option>') 
        }); 
       }); 

Answer 1

Sie können Ihre Anzeige auf Inline-Block wie im Snippet unten. Ein weiterer guter Weg ist die Verwendung der Boostrap's column or grid systems. Übrigens hat Ihr JavaScript Verweise auf HTML-Elemente, die Sie nie definiert haben. Daher habe ich es nicht benutzt. Außerdem war dein Etikett leer, und ich habe etwas Text zum Testen hinzugefügt.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <div> 
 
    <label style="display: inline-block;">Filtrar por Categoria:</label> 
 
     <div style="display: inline-block;" id="select-categories">Label</div> 
 
    </div> 
 
</div>