使用AJAX

Question

我正在使用Bootstrap创建一个下拉列表。

<div class="form-group">
        <select class="form-control" id="ddlCountry">
            <option selected>Countries</option>
        </select>
    </div>

但是当我尝试运行代码时，我的选择被隐藏，它会自动创建一个div

<div class="btn-group bootstrap-select form-control open">
    <button title="Countries" class="btn dropdown-toggle form-control selectpicker btn-default" aria-expanded="true" type="button" data-toggle="dropdown" data-id="ddlCountry">
        <span class="filter-option pull-left">Countries</span>&nbsp;<span class="caret"></span>
    </button>
    <div class="dropdown-menu open" style="width: 0px; height: 0px;">
        <ul class="dropdown-menu inner selectpicker" role="menu">
            <li class="disabled selected" data-original-index="0">
                <a tabindex="-1" href="#" data-tokens="null" data-normalized-text='<span class="text">Countries</span>'>
                    <span class="text"></span><span class="glyphicon glyphicon-ok check-mark"></span>
                </a>
            </li>
        </ul>
    </div>
</div>

当我想用AJAX填充它时，它会填充隐藏的选择，但样式化的下拉列表仍具有相同的选项。

ddlCountry.append($("<option></option>").val(country.Id).html(country.name));

如何在“国家/地区”列表中填充自动生成的div？