I am using Bootstrap Multiselect from

However, my dropdown is not showing my results...or even dropping down for that matter. Not sure if it makes any difference, but I am using this in a Modal and I am using this along side AngularJS.

This is all I should have to put on my HTML page (according to the website above):

<select id="primaryCategory-dropdown" multiple="multiple"></select>

I am making the following AJAX call to my service:

function loadPrimaryCategories() {

    $.ajax({
        url: '/Portal/api/PrimaryCategories/GetAll',
        type: 'GET',
        dataType: 'json',
        success: function (data) {     
            $.each(data, function(i, primaryCategory) {
                $("#primaryCategory-dropdown").append('<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>');
            });
        },
        error: function(data) {
            alert(data);
        }
    });
}

I am getting results back(I have 57 to be exact):

<option value="1">2004 Examination

<option value="2">341 Meeting

<option value="3">Abandonment

But the button does not open to show my results. It will enable and disable when I click on it. You can also see a scroll list box appear with all the values when I change the style='display: block'. It almost seems like it isn't binding properly.

I am following the same instructions as this example, but once I implement it into my solution it doesn't work: /

I am using Bootstrap Multiselect from http://davidstutz.github.io/bootstrap-multiselect/#getting-started

However, my dropdown is not showing my results...or even dropping down for that matter. Not sure if it makes any difference, but I am using this in a Modal and I am using this along side AngularJS.

This is all I should have to put on my HTML page (according to the website above):

<select id="primaryCategory-dropdown" multiple="multiple"></select>

I am making the following AJAX call to my service:

function loadPrimaryCategories() {

    $.ajax({
        url: '/Portal/api/PrimaryCategories/GetAll',
        type: 'GET',
        dataType: 'json',
        success: function (data) {     
            $.each(data, function(i, primaryCategory) {
                $("#primaryCategory-dropdown").append('<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>');
            });
        },
        error: function(data) {
            alert(data);
        }
    });
}

I am getting results back(I have 57 to be exact):

<option value="1">2004 Examination

<option value="2">341 Meeting

<option value="3">Abandonment

But the button does not open to show my results. It will enable and disable when I click on it. You can also see a scroll list box appear with all the values when I change the style='display: block'. It almost seems like it isn't binding properly.

I am following the same instructions as this example, but once I implement it into my solution it doesn't work: https://jsfiddle/3p3ymwwc/

• javascript
• jquery
• ajax
• angularjs
• twitter-bootstrap

• 1 I don't see any angular code, or attempt to use binding here... It looks like you are just directly writing option tags inside the select.... – pquest Commented Mar 3, 2015 at 17:35

7 Answers 7

I tried with $("#ddlState").multiselect('refresh'); but it didn't work for me.

But when I replaced 'refresh' with 'rebuild' it works:

$("#ddlState").multiselect('rebuild');

I found it!

I needed to add to my ajax call 'async: false'

try adding the refresh call inside the success method:

$.ajax({
url: '/Portal/api/PrimaryCategories/GetAll',
type: 'GET',
dataType: 'json',
success: function (data) {     
    $.each(data, function(i, primaryCategory) {
        $("#primaryCategory-dropdown").append('<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>');
    });
    $("#primaryCategory-dropdown").multiselect('refresh');
},
error: function(data) {
    alert(data);
}
});

You might be loading multiselect.js file before the option list updated with AJAX call so while execution of multiselect.js file there is empty option list is there to apply multiselect functionlaity. So first update the option list by AJAX call then initiate the multiselect call you will get the dropdown list with the dynamic option list.

Hope this will help you out.

// Multiselect dropdown list related js & css files

[http://cdn.rawgit./davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css][1] [http://cdn.rawgit./davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js][2]

// This function should be called while loading page
var loadParentTaskList = function(){
    $.ajax({
        url: yoururl,
        method: 'POST',
        success: function(data){
            // To add options list ing from AJAX call multiselect
            for (var field in data) {
                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');
            }
   
            // To initiate the multiselect call 
            $("#parent_task").multiselect({
                includeSelectAllOption: true
            })
        }
    });
}

// Multiselect drop down list with id parent_task
<select id="parent_task" multiple="multiple">
</select>

Even if anyone is facing problem in populating the dropdown after ajax call using jquery-multiselect plugin.. Try using reload instead of "refresh" OR "rebuild"

    $('#select-id').change(function(){
    var selectedId = $('#select-id').val();
    $.ajax({
             url: 'url-to-action', //getDatafromYourMethod()
                type: "post",
                dataType: "json",
                data: {
                    data: 'fetchData',
                    name: selectedId                                
                },              
            crossDomain: true,
            success: function(returnData) {
                    var options = '';
                    $.each(returnData, function(key, value){
                        options +='<option value='+key+'>'+value+'</option>';
                    })
                    $('#select-ids').html(options);
                    $('#select-ids').multiselect('reload');                     
            }
    });
});

idk why your code isn't being rendered properly, but do give this a try. Instead of appending one by one , store that html data as a string in variable and then once you have finsihed iterating over all the items, append them at once. Try putting this in inside your success: function(data)

let htmldata=""
$.each(data, function(i, primaryCategory) {
             htmldata+=   '<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>';
            }); 
$("#primaryCategory-dropdown").html(htmldata);
    
},

TRY THIS,100% YOU WILL GET EXPECTED OUTPUT

<script type="text/javascript" src="http://code.jquery./jquery-1.8.2.js"></script>

<script src="bootstrap-2.3.2.min.js" type="text/javascript"></script>

<script src="bootstrap-multiselect.js" type="text/javascript"></script> 


<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            contentType: "application/json",
            data: "{}",
            url: "multiselect.aspx/BindStates",
            dataType: "json",
            async: false,
            success: function(data) {
                var select = $("#ddlState");

                select.children().remove();
                if (data.d) {
                    $(data.d).each(function(key,value) {
                      $("#ddlState").append($("<option></option>").val(value.State_id).html(value.State_name));                      
                    });                    
                }
             $('#ddlState').multiselect({includeSelectAllOption: true});
             $("#ddlState").multiselect('refresh');
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                debugger;
            }
        });
    });
</script>

    <center>
        <select id="ddlState" name="ddlState" multiple="multiple">
        </select>

    </center>
</div>

include this css in top