Dynamic dropdown using jquery

Question

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.

Simone Celia · Accepted Answer · 2022-03-24 12:22:20Z

1

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>

answered Mar 24, 2022 at 12:22

Simone Celia

1442 gold badges3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3653474 Over a year ago

Thanks for the answer but there is one issue dropdown is created outside the form group i want to create it within form group

Simone Celia Over a year ago

oh sorry, didnt understood that... so you can use

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

Collectives™ on Stack Overflow

Dynamic dropdown using jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related