27

I used silviomoreto's bootstrap-select but I'm having problems. I have 2 Dropdowns (Select) a Region dropdown and Cities. Now, I have a jquery onchange function, the function will change the values in the cities dropdown depending on the region selected. Here's my code:

<select id="region" class="selectpicker"></select>
<select id="cities" class="selectpicker"></select>

$("#region").on('change', function () {
   $("#cities").html('<option>city1</option><option>city2</option>');
});

The problem is I think the compatibility? When I removed the class="selectpicker" it works fine, but I can't remove it because I used it for my dropdown ui. I checked the documentation in here https://developer.snapappointments.com/bootstrap-select/ but I can't find relevant answer to my question. Thanks!

caseyjhol
  • 3,090
  • 2
  • 19
  • 23
Yassi
  • 2,379
  • 4
  • 24
  • 33

2 Answers2

78

Try selectpicker('refresh').

refresh()

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

Snippet

$("#cities")
   .html('<option>city1</option><option>city2</option>')
   .selectpicker('refresh');

Working Demo: http://jsfiddle.net/codeandcloud/nr54vx7b/

caseyjhol
  • 3,090
  • 2
  • 19
  • 23
naveen
  • 53,448
  • 46
  • 161
  • 251
  • 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:06
  • I checked the jsfiddle you supplied and it doesn't work either – Trevor Jan 15 '16 at 00:50
  • that was because the jsfiddle css and js links were broken. updated fiddle – naveen Jan 15 '16 at 20:06
  • Oh man You're a legend. I was about to hit my head on wall. then see your answer you saved me – Saad Suri Mar 22 '17 at 01:13
  • Ajax binding for my dropdown works fine. But if the bound dropdown postsback it gives me error. System.Web.HttpException at System.Web.UI.Util.CheckVirtualFileExists(VirtualPath virtualPath). Any idea why i could be getting this? – Vishal prabhu lawande Sep 27 '17 at 12:35
1

I’ve created an example of creating a dynamic drop-down menu with grouped options by taking the data from an array. I hope it helps

// Example data Array list
namespace_list = [
    ['test1-c1', 'test2-c1', 'test3-c1', 'test4-c1', 'test5-c1', 'test6-c1'],
    ['test1-c2', 'test2-c2', 'test3-c2', 'test4-c2', 'test5-c2', 'test6-c2']
]


$('#pod_dropdown').selectpicker();

// Delete old options of the dropdown 
$('#pod_dropdown').find('option').remove();

// Selecting selectpicker dropdown
select = document.getElementById('pod_dropdown');

for (let namespace of namespace_list) {

    // Generating group name
    namespace_name = namespace[0].slice(6, 8)+'-title'

    // Creating the optiongroup

    var optgroup = document.createElement('optgroup');
    optgroup.id = namespace_name;
    optgroup.label = namespace_name
    // Appending optiongroup to the dropdown
    select.appendChild(optgroup);

    // Selecting the optiongroup 
    optiongroup = document.getElementById(namespace_name);

    for (let pod of namespace) {

        // Creating the options of the optiongroup 
        var opt = document.createElement('option');
        opt.value = pod;
        opt.innerHTML = pod;
        // Appending the option to the optiongroup
        optiongroup.appendChild(opt);

    }

}
// Refresh the dropdwon menu
$('#pod_dropdown').selectpicker("refresh");



// Getting the value after selecting it in the UI and unselect the dropdown

function filterpod() {
    let pod = $('#pod_dropdown').val().toString();
    console.log(pod)

}
<!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- bootstrap -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- multi select dropdown -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

    <!-- Creatting the dropdown -->
    <select id="pod_dropdown" class="selectpicker" data-style="btn btn-primary btn-sm" multiple data-live-search="true" data-width="auto"></select>
    
    <!-- Calling the function filterpod when hide dropdown after select option -->
    <script type="text/javascript">
        $('#pod_dropdown').on('hide.bs.select', function(e) {filterpod();});
    </script>
Alex Verdaguer
  • 84
  • 5