5

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.

Tasaduq H.
  • 301
  • 1
  • 2
  • 9

1 Answers1

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

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

Tasaduq H.
  • 301
  • 1
  • 2
  • 9
  • 3
    How do you call ajax function, is on change? or on keypress If possible can you please post the working code/link, Thanks – BJ Patel Jul 26 '18 at 12:59