Estoy tratando de crear un menú desplegable dinámico usando jquery
var rooms = $("<select />"); $(res.data).each(function () { var option = $("<option />"); option.html(this.name); option.val(this.id); rooms.append(option); }); el menú desplegable se crea cuando lo agrego directamente a append_parent_div
$('#append_parent_div').append(rooms);pero cuando lo agrego con varios div's
$('#append_parent_div').append('<div class="col-lg-6 col-md-12 col-12"> <div class="form-group">'+rooms+'</div></div>'); entonces [object Object] se agrega en mi html.
no use + , sino , :
ejemplo:
$('#append_parent_div').append('<div class="col-lg-6 col-md-12 col-12"> <div class="form-group">', rooms, '</div></div>');
Como dijo la documentación: https://api.jquery.com/append/
Estabas concatenando cadenas con un objeto
Ejemplo de trabajo:
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div id="append_parent_div"> </div> <script> var rooms = $("<select />"); var res = {}; res.data = [{name:"name number 1", id:1},{name:"name number 2", id:2}] $(res.data).each(function () { var option = $("<option />"); option.html(this.name); option.val(this.id); rooms.append(option); }); $('#append_parent_div').append('<div class="col-lg-6 col-md-12 col-12"> <div class="form-group">', rooms, '</div></div>'); </script> </body> </html>