CODEWITHSUNDEEP
jqueryasp.net-mvc-5bootstrap-select
Mxo Sibeko
Mxo Sibeko

Reputation: 147

How to initialize (and re-initialize) bootstrap-select via JavaScript

I have a bootstrap modal with just one 'select' field, which I use for selecting colors or gender cuts or sizes for a selected clothing product on my beckend web app.

I get the data via ajax, returning a json array with {Id,Text,Val} for either color/gender or size (id differentiates color/gender/size) and I clear out my select before adding the new options.

this works well with the standard HTML select..

<select id="productProperty" class="form-control" multiple></select>

Output with standard select:

output with standard select

but nothing works with boostrap-select 

<select id="productProperty" class="form-control selectpicker" multiple></select>

Output with bootstrap select:

[Output with bootstrap select[2]

here's my ajax call

     $.ajax({   url: 'theUrl',
                type: "GET",
                data: { requiredInput: 'that' }
            }).done(function(response) {

                $("#productProperty").empty();
                var selectHtml = "";
                $.each(response.data, function(index, item) {
                  selectHtml += "<option value='" + item.Id + "' " + disabled_ + ">" + item.Name + "</option>";
                });

                $("#productProperty").html(selectHtml);
                $("#productProperty").selectpicker('refresh');

            });

I have $('.selectpicker').selectpicker() on my layout (MVC) file as I do with datepicker and datatables

How can I work this out with bootstrap-select ?. Thanks.

Upvotes: 2

Views: 7251

Answers (3)

Tady
Tady

Reputation: 11

jQuery $.each syntax error

Original HushdMap Access

$.each(response.data, function(index, item) {
    selectHtml += "<option value='" + item.Id + "' " + disabled_ + ">" + item.Name + "</option>";
});

Success HushdMap Access

$.each(response.data, function(index, item) {
    selectHtml += "<option value='" + index + "' " + disabled_ + ">" + item + "</option>";
});

P.S. DevTools console step by step checking ...

console.log(disabled_);

my console

Uncaught ReferenceError: disabled_ is not defined

your console?

disabled

Upvotes: 1

psychopython
psychopython

Reputation: 61

$(select).selectpicker('refresh');

Upvotes: 3

Mingle Li
Mingle Li

Reputation: 1350

Why don't you just build the whole thing via jQuery?

First, make the select dropdown:

var html = "";
html += '<select id="productProperty" class="form-control selectpicker" multiple>';

Then go through your ajax:

 $.ajax({   url: 'theUrl',
            type: "GET",
            data: { requiredInput: 'that' }
        }).done(function(response) {

            $.each(response.data, function(index, item) {
              html += "<option value='" + item.Id + "' " + disabled_ + ">" + item.Name + "</option>";
            });
        });

Then close tags:

html += "</select>";

Append it, and you should be all good.

$(".container").append(html);

Upvotes: -1

Related Questions