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 Jun 04 '18 at 08:57 — segito10, Jun 04 '18 at 08:57
no there is no error in console – Hatim Ranapurwala Jun 04 '18 at 09:09 — Hatim Ranapurwala, Jun 04 '18 at 09:09

segito10 · Answer 1 · 2019-06-13T15:47:56.143

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/

please update your post with what you have tried i update the code by my side with $.each and it works fine : https://jsfiddle.net/segito/0u3nw1wc/1/ — segito10, Jun 04 '18 at 09:44

Hatim Ranapurwala · Answer 2 · 2018-06-04T10:12:40.207

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 04 '18 at 10:12

answered Jun 04 '18 at 09:51

Hatim Ranapurwala

103
1
15

Please precise how your received data is formated to make your response helpful – segito10 Jun 04 '18 at 11:50

Select dynamically in Bootstrap-select with multiple values not working

2 Answers2