I want to populate the following select statement with options gotten from a php code

<select name='friends[]' id='friends' class='selectpicker show-tick form-control'
        data-live- search='true' multiple>
    <!-- options here -->
</select>

my jQuery code

$.ajax({
    url:'get_togethers.php', //this returns object data
    data:'user_id='+user_id,
    type:'POST',
    datatype:'json',
    success:function(data) { //data = {"0":{"id":1,"name":"Jason"},"1":{"id":2,"name":"Will"},"length":2 }
        data = JSON.parse(data);
        var options;
        for (var i = 0; i < data['length']; i++) {
            options += "<option value='"+data[i]['id']+"'>"+data[i]['name']+"</option>";
        }
        $("#friends").append(options);
    }
});

Static values inside the select tag show up, but the values added from the ajax function don't. EDIT : If I remove the bootstrap from this, the values show up, but with bootstrap on, they don't show up.

I want to populate the following select statement with options gotten from a php code

<select name='friends[]' id='friends' class='selectpicker show-tick form-control'
        data-live- search='true' multiple>
    <!-- options here -->
</select>

my jQuery code

$.ajax({
    url:'get_togethers.php', //this returns object data
    data:'user_id='+user_id,
    type:'POST',
    datatype:'json',
    success:function(data) { //data = {"0":{"id":1,"name":"Jason"},"1":{"id":2,"name":"Will"},"length":2 }
        data = JSON.parse(data);
        var options;
        for (var i = 0; i < data['length']; i++) {
            options += "<option value='"+data[i]['id']+"'>"+data[i]['name']+"</option>";
        }
        $("#friends").append(options);
    }
});

Static values inside the select tag show up, but the values added from the ajax function don't. EDIT : If I remove the bootstrap from this, the values show up, but with bootstrap on, they don't show up.

• javascript
• jquery
• twitter-bootstrap
• multi-select
• livesearch

• i assume data['length'] should be data.length – noobHere Commented Jan 1, 2015 at 6:19
• sorry I forgot to mention the value of data i get form the php file – Tasaduq H. Commented Jan 1, 2015 at 11:38
• I have added the value of data in ment. – Tasaduq H. Commented Jan 1, 2015 at 11:45
• change name for data.(returned value and parsed value are using the same name) – Qingfeng Commented Jan 1, 2015 at 11:46
• object data is being over written in previous data. – Tasaduq H. Commented Jan 1, 2015 at 12:02

1 Answer 1

$('#friends').selectpicker('refresh');

Is necessary to update the newly added values, which I had missed.