Dynamic dropdown using jquery

March 24, 2022

I’m trying to create a dynamic dropdown using jquery

   var rooms = $("<select />");

   $(res.data).each(function () {
         var option = $("<option />");
         option.html(this.name);
         option.val(this.id);
         rooms.append(option);
   });

dropdown is created when i directly append it to append_parent_div

$('#append_parent_div').append(rooms);

but when i append it with several div’s

  $('#append_parent_div').append('<div class="col-lg-6 col-md-12 col-12"> <div class="form-group">'+rooms+'</div></div>');

then [object Object] is getting appended in my html.

>Solution :

do not use +, but ,:

example:

$('#append_parent_div').append('<div class="col-lg-6 col-md-12 col-12"> <div class="form-group">', rooms, '</div></div>');

Like documentantion said: https://api.jquery.com/append/

You were concatenating strings with an object

Working example:

<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>