Question 36537 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to load the default selected values from ajax for bootstrap-select – Jquery

I’m using https://github.com/truckingsim/Ajax-Bootstrap-Select boostrap-select plugin to select the multi-select dropdown.

What I can do:

  • Search drop drown data from ajax request
  • select multiple values

What is missing:

  • Default page load does not set DB values. (i have an ids list but I don’t know how to load labels for corresponding ids)
    I can load drop-drown data searches through the drop-down.
    But I’m not able to set/load default selected values from ajax call during edit page load
<link href="css/bootstrap-select.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />

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

<div class="form-group row required">
<label for="u-list" class="col-md-6 col-form-label">Label</label>
<div class="col-md-6">
    <select class="form-control selectpicker with-ajax" id="u-list" name="u-list" multiple data-live-search="true">
    </select>           
</div>
</div>

    var list = {
            ajax          : {
                url     : 'ajaxhandle?action=getApps',
                type    : 'GET',
                dataType: 'json',
                // Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
                // automatically replace it with the value of the search query.
                data    : {
                    term: '{{{q}}}'
                }
            },
            locale        : {
                emptyTitle: 'Select and Begin Typing'
            },
            log           : 3,
            preprocessData: function (data) {
                var i, l = data.length, array = [];
                if (l) {
                        console.log(data[i]);
                    for (i = 0; i < l; i++) {
                        array.push($.extend(true, data[i], {
                            text : data[i].label,
                            value: data[i].id,
                            data : {
                                subtext: data[i].label
                            }
                        }));
                    }
                }
                // You must always return a valid array when processing data. The
                // data argument passed is a clone and cannot be modified directly.
                return array;
            }
        };

        $('.selectpicker').selectpicker().filter('.with-ajax').ajaxSelectPicker(list);
        $('select').trigger('change');
Tags:

3

Answers


  1. 0

    The docs dont make it look very obvious but I believe all you need to do to get default options to display is add them to the select element. Right now your code shows an empty select element.

    <select class="form-control selectpicker with-ajax" id="u-list" name="u-list" multiple data-live-search="true">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3" selected>Third</option>
</select>
    Login or Signup to reply.
  2. 0

    might be below code help you.

    var list = {
            ajax          : {
                url     : 'ajaxhandle?action=getApps',
                type    : 'GET',
                dataType: 'json',
                // Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
                // automatically replace it with the value of the search query.
                data    : {
                    term: '{{{q}}}'
                }
            },
            locale        : {
                emptyTitle: 'Select and Begin Typing'
            },
            log           : 3,
            preprocessData: function (data) {
                var i, l = data.length, array = [];
                if (l) {
                        console.log(data[i]);
                    for (i = 0; i < l; i++) {
                        array.push($.extend(true, data[i], {
                            text : data[i].label,
                            value: data[i].id,
                            data : {
                                subtext: data[i].label
                            }
                        }));
                    }
                }
                // You must always return a valid array when processing data. The
                // data argument passed is a clone and cannot be modified directly.
                return array;
            }
        };
       // Suppose selected value is 1 then pass as below. if multi value then pass [1,2] array in val() funtion 
       $('select[name=u-list]').val(1);
       $('.selectpicker').selectpicker('refresh')
       $('select').trigger('change');
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>




<div class="form-group row required">
<label for="u-list" class="col-md-6 col-form-label">Label</label>
<div class="col-md-6">
    <select class="selectpicker with-ajax" id="u-list" name="u-list" multiple data-live-search="true">
    </select>           
</div>
</div>

    More detail reference – reference 1
    reference 2 reference 3

    Login or Signup to reply.
  3. 0

    Ajax-Bootstrap-Select extends the existing Bootstrap Select.

    The documentation for Bootstrap Select is here: https://developer.snapappointments.com/bootstrap-select/examples/#customize-menu

    In order to show the selected values from the database you have to manually create the HTML for the optgroup inside the <select></select> tags and populate it with the selected values (value = id from the database, and the text between <option></option>)

    <select class="selectpicker with-ajax" id="u-list" name="u-list" multiple data-live-search="true">
<optgroup>
    <option value="0" class="string" selected="selected">Ana</option>
    <option value="2" class="string" selected="selected">Sandra</option>
</optgroup>
</select>

    This way Ana and Sandra will be selected by default when you load the page. You need to have the ids and labels already loaded from the database.

    Also check the working snippet below:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="form-group row required">
<label for="u-list" class="col-md-6 col-form-label">Label</label>
<div class="col-md-6">
    <select class="selectpicker with-ajax" id="u-list" name="u-list" multiple data-live-search="true">
    <optgroup>
                <option value="0" class="string" selected="selected">Ana</option>
                <option value="2" class="string" selected="selected">Sandra</option>
            </optgroup>
    </select>           
</div>
</div>

    I tested this code on localhost with your javascript, and live searching was working. When I searched for Maria via AJAX, it was added to the currently selected values: Ana and Sandra.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search