Select dynamically in Bootstrap-select with multiple values not working

Question

I have tried an example: this example

and its working fine but when I tried to bind dynamically it's not working. Please anyone can help in this.

please find below code:

Dropdown code:

 <div class="col-md-4">
 <div class="form-group">
 <label for="field-2" class="control-label">Dropdown</label>
 <select class="form-control selectpicker" multiple data-selected-text-format="count" data-live-search="true" data-style="btn-white" id="lstdrpdwn" name="lstdrpdwn">
 </select>
 </div>
 </div>

** Jquery:**

 function FillDetail(id) {
        $.ajax({
            dataType: "json",
            type: "POST",
            url: '../Getdata',
            data: 'id=' + id,
            async: true,
            success: function (data) {
                $.each(data, function (i, item) {
                    alert('[' + item.CooperativeUserID + ']');
                    $('#lstdrpdwn').selectpicker('val', '[' + item.CooperativeUserID + ']');  //.val(item.CooperativeUserID);
                    $('#lstdrpdwn').selectpicker('refresh');
                })
            },
            error: function (jqXHR, textStatus, errorThrown) {
            }
        });
    }

Also i have tried to remove //$('#lstdrpdwn').selectpicker('refresh'); the lines.

And aslo tried to refresh the selectpicker
$('.selectpicker').selectpicker('refresh'); its not working.

When I bind the values with static IDs it worked fine at the time of filling dropdown.

function filldropdown() {
        return $.ajax({
            dataType: "json",
            type: "POST",
            url: '../Getdropdown',
            data: 'id=0',
            async: true,
            success: function (data) {
                $("#lstdrpdwn").html("");
                $.each(data, function (key, val) {
                    $("#lstdrpdwn").append($("<option></option>").val(val.ID).html(val.Name));
                });
                $('#lstdrpdwn').selectpicker('refresh');
                $('#lstdrpdwn').selectpicker('val', [2,5]);

            },
            error: function (jqXHR, textStatus, errorThrown) {
            }
        });
    }

Do you have any error on the console ?

segito10
– segito10

2018-06-04 08:57:31 +00:00
Commented Jun 4, 2018 at 8:57 — segito10
– segito10, Commented Jun 4, 2018 at 8:57
no there is no error in console

Hatim Ranapurwala
– Hatim Ranapurwala

2018-06-04 09:09:17 +00:00
Commented Jun 4, 2018 at 9:09 — Hatim Ranapurwala
– Hatim Ranapurwala, Commented Jun 4, 2018 at 9:09

segito10 · Accepted Answer · 2019-06-13 15:47:56Z

1

So thing is you have to give an array to selectpicker in order to set the vals. you are doing it like this :

$.each(data, function (i, item) {
                    alert('[' + item.CooperativeUserID + ']');
                    $('#lstdrpdwn').selectpicker('val', '[' + item.CooperativeUserID + ']');  //.val(item.CooperativeUserID);
                    $('#lstdrpdwn').selectpicker('refresh');
                })

And a correct way shoul be like this :

var selected =  data.map(function(e) {
             return e.CooperativeUserID ;
           });
$('#lstdrpdwn').selectpicker('val', selected);

OR using the $.each :

var selected = [];
    $.each(data, function (i, item) {
                 selected.push(item.CooperativeUserID);       

                    });
$('#lstdrpdwn').selectpicker('val', selected);

you can find an example here : https://jsfiddle.net/segito/0u3nw1wc/

edited Jun 13, 2019 at 15:47

answered Jun 4, 2018 at 9:17

segito10

3886 silver badges14 bronze badges

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

1 Comment

segito10 Over a year ago

please update your post with what you have tried i update the code by my side with $.each and it works fine : jsfiddle.net/segito/0u3nw1wc/1

Hatim Ranapurwala · Accepted Answer · 2018-06-04 10:12:40Z

0

Thank you for replying

i just tried like this and it worked for me.

JQUERY

function FillDetail(id) {
    $.ajax({
        dataType: "json",
        type: "POST",
        url: '../Getdata',
        data: 'id=' + id,
        async: true,
        success: function (data) {
            $.each(data, function (i, item) {
                var array = item.CooperativeUserID.split(',');
                $('#lstdrpdwn').selectpicker('val', array);
            })
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
    });
}

edited Jun 4, 2018 at 10:12

answered Jun 4, 2018 at 9:51

Hatim Ranapurwala

1131 gold badge1 silver badge16 bronze badges

1 Comment

segito10 Over a year ago

Please precise how your received data is formated to make your response helpful

Collectives™ on Stack Overflow

Select dynamically in Bootstrap-select with multiple values not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related