CODEWITHSUNDEEP
jqueryhtmlrazorbootstrap-4bootstrap-select
Joji
Joji

Reputation: 356

Bootstrap-select wont work

bootstrap-select dont work when I implement it to my code, the data came from the select tag is not from the database, its from the json file and its embedded when the modal is open. Here is my code

 <div class="form-group">
    <label class="control-label">City</label>
    <select id="city" class="form-control form-control-sm" name="City"></select>
    @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
</div>

my script code where the data of select tag is loaded

$(function () {
    var dropdown = $('#city');
    $.getJSON(AppGlobal.baseUrl + 'JsonFiles/city.json', function (data) {

        $.each(data.RECORDS, function (i, val) {

            dropdown.append($('<option></option>').attr({ 'value': val.citymunDesc, 'data-id': val.provCode }).text(val.citymunDesc));

        });
        $('#city').trigger('change');
    });  
    $('#city').selectpicker();
})

But When i run my code the Select Tag where I set it to bootstrap-selectpicker doesnt have the data loaded.. Image when I Open the modal where the bootstrap-select dont work

Upvotes: 1

Views: 217

Answers (1)

Mohammad
Mohammad

Reputation: 1577

You have to refresh your select :

 $('#city').selectpicker('refresh');

Upvotes: 2

Related Questions