Jquery create select tag with data from array

Question

I need to access database and update options of a select tag. My code is here.

 $(window).load(function () {

     $.getJSON('http://localhost/ABC/web/app_dev.php/doctorFillOption', function (data) {

         var length = data.length,
             element = null;
         $('#idcatFill').append('<select id ="idCat"  style="width:200px;margin-left:30px;margin-top:5px;" type="text"><option value=""></option>');

         for (var i = 0; i < length; i++) {
             row = data[i];
             alert("id" + row['id'] + ' ' + row['category_name']);
             $('#idcatFill').append(
                 '<option value="' + row['id'] + '">' + row['category_name'] + '</option>'
             );
         }

     });
     $('#idcatFill').append('</select><br/>');
 });

But it doesn't get options. Need help. Thanks.

There is an edit button underneath your question if you feel you need to add something. — George
– George, Commented Nov 17, 2013 at 13:09
Please use jsbeautifier.org to format your HTML and JS code. Also could you please create a fiddle? — Chandranshu
– Chandranshu, Commented Nov 17, 2013 at 13:11
I need to create the tag when the web page is loading.I got the relevent data by the database to data variable.(checked with the alert). — Lakmal Vithanage
– Lakmal Vithanage, Commented Nov 17, 2013 at 13:12

takeit · Accepted Answer · 2013-11-17 13:13:01Z

6

Simply:

$.each(data, function (index, value) {
  $('#idcatFill').append($('<option/>', { 
      value: index,
      text : value 
  }));
});

answered Nov 17, 2013 at 13:13

takeit

4,0911 gold badge22 silver badges36 bronze badges

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

Comments

Chandranshu · Accepted Answer · 2013-11-17 13:15:06Z

1

Use the following code to append your tag:

$("#idcatFill").append(function() {
    var elem = $('<select id ="idCat"  style="width:200px;margin-left:30px;margin-top:5px;">');
    for (var i = 0; i < length; i++) {
         row = data[i];
         elem.append('<option value="' + row['id'] + '">' + row['category_name'] + '</option>');
    }
    return elem;
});

you can't attach incomplete elements to the dom. You need to build your <select> tag before inserting it.

answered Nov 17, 2013 at 13:15

Chandranshu

3,6693 gold badges22 silver badges37 bronze badges

Collectives™ on Stack Overflow

Jquery create select tag with data from array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related