Loading Bootstrap select options through Ajax post

Question

Using Bootstrap 3 and Bootstrap-Select plugin, I am trying to load the options of the select drop down by ajax from database.

The code works perfectly when I remove the select picker class from the select element but with that class (which is required to use Bootstrap select) it is not loading any of the options.

 <select id="arearesults" class="selectpicker" data-live-search="true">
    <option value="select">Select From The List</option>
 </select>

$('.btn-group .btn').click(function(){
    $.post(
    'con/animalList.php',
    { selType : this.id },
    function(data)
                {
                  $('#arearesults').html(data);
                }
    );
});

I already test the Bootstrap select plugin and it is also working in stand alone mode (hard coded). How can I solve this issue?

I believe you can use AJAX, but not PHP. You could always fake it somehow. Just need an environment to test and debug. — Fizzix, Apr 30 '14 at 23:23

score 7 · Accepted Answer · edited Jun 18 '17 at 04:28

7

Multiple errors in your code.

You haven't mentioned the response data-type in the $.post. Is the response data "JSON" or "html", etc?
After filling the values through AJAX in the selectbox you have to refresh it. Code:
```
$('#arearesults').selectpicker("refresh");
```

edited Jun 18 '17 at 04:28

wittich

2,079
2
27
50

answered May 01 '14 at 10:39

Coderaemon

3,619
6
27
50

Thanks Coderaemon, I update to code to refresh the selectpicker but I am not sure where to use the data-type in the post? I tried like this way dataType: "html" but it didnt work – Mona Coder May 01 '14 at 16:47
data-type you have to mention in the `$.post` ajax request. Check this https://api.jquery.com/jQuery.post/ – Coderaemon May 02 '14 at 05:35
I can not get it running for my problem [here](http://stackoverflow.com/questions/26191920/ajax-does-not-work-with-bootstrap-select). – user977828 Oct 05 '14 at 12:09

score 2 · Answer 2 · answered Dec 18 '14 at 06:30

2

this solution worked for me

  $('.selectpicker').selectpicker({});

answered Dec 18 '14 at 06:30

Muhammad

3,169
5
41
70

Loading Bootstrap select options through Ajax post

2 Answers2

Linked