How to populate bootstrap multi select using jQuery

Question

I am using two multiselect dropdown. second multiselect option is depends on first multiselect values.

I am trying to fill the second multiselect (#field_zone) option using ajax call when first dropdown (#participation_channels) option is select or deselect. I'm trying to populate second multiselect dropdown(#field_zone) but second dropdown is not populate

plugin used

 $(document).ready(function () {
    $('#participation_channels').multiselect({
        onChange: function (option, checked) {
            var channels = $('#participation_channels').val();
            $.ajax({
                url: "url",
                data: {channels: channels},
                type: "POST",
                dataType:'json',
                cache: false,
                success: function (data) {
                    $.each(data, function(i, zone) {
                        $("#field_zone").append('<option value="' + zone.zone + '">' + zone.zone + '</option>');
                    });
                    $("#field_zone").attr('multiple', 'multiple'); 
                   $("#field_zone").multiselect(); 
                }
            });
        }
    });
    $('#field_zone').multiselect();
});

muecas · Accepted Answer · 2018-06-10 18:53:46Z

2

You need to force the multiselect to regenerate all options from the original select element. So, after creating the new options for the select (inside the success callback) you should change:

$("#field_zone").multiselect();

to:

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

so the multiselect will be rebuilt based on the updated options.

answered Jun 10, 2018 at 18:53

muecas

4,3251 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to populate bootstrap multi select using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related