引导选择不起作用

bootstrap select在我的代码中实现时不起作用,select标记中的数据不是来自数据库,而是来自json文件,模式打开时嵌入的数据。这是我的密码

 <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>

加载select标记数据的脚本代码

$(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();
})

但当我运行代码时,我将Select标记设置为bootstrap selectpicker时,它没有加载数据。。