option values in bootstrap select are displayed outside the dropdown

Question

I'm facing an issue at times in my html page where all the options in the bootstrap-select are displayed outside the dropdown box. (attached the screenshot) dropdown

This issue is only observed sometimes. The values are getting populated from an api call. This is my bootstrap-select css and js reference: https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css, https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js

Below are my code snippets.

$.ajax({
		url: serverName + "api/v1/get/countrylist",
		type: 'GET',
		headers: {
				"Content-Type": "application/json",
				"Authorization": "Basic " + basicKey,
				"x-access-token": xAccessToken

		},
		success: function(response){
			 // console.log("visa-response: "+ response);
				var countryArr = [];
		response.forEach(function(item){
				countryArr.push({"country": item.country, "fee": item.fee});
			 // console.log("my country " + item.country)
		})
		//console.log("countryArr-response: "+ countryArr[1].country);
		countryArr.forEach(function(item){
				$('.select-country .country-list').append('<option class="'+item.fee + '"' +'data-tokens="'+ item.country+'">' + item.country +'</option>')
		})
	
		$('.selectpicker').selectpicker();
		},
		error: function (exception) {
				console.log(exception);
		}
});

  <div class="col-md-6 select-country">



                            <div class="customer-country text-center" >
                                <label style="margin-right:10px;"><strong>Select Your Country:</strong></label>
                                <select class="selectpicker country-list"  data-live-search="true" data-width="auto" data-style="btn-success" data-dropup-auto="false" standard title="Select Country...">

                                </select>

                            </div>

Answer 1

Seems like bootstrap-select have to be re-render and refreshed when the options are loaded dynamically

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

Try adding this 2 lines at the last line of success function callback

Answer 2

So, when you use selectpicker class, it will create button element siblings with your select element with the SAME CLASS. So, when you target only class, it will update both of them. Use the selector: $(select.country-list) in the append section. It will only update the select element. It works for me.

$.ajax({
        url: serverName + "api/v1/get/countrylist",
        type: 'GET',
        headers: {
                "Content-Type": "application/json",
                "Authorization": "Basic " + basicKey,
                "x-access-token": xAccessToken

        },
        success: function(response){
             // console.log("visa-response: "+ response);
                var countryArr = [];
        response.forEach(function(item){
                countryArr.push({"country": item.country, "fee": item.fee});
             // console.log("my country " + item.country)
        })
        //console.log("countryArr-response: "+ countryArr[1].country);
        countryArr.forEach(function(item){
                $('select.country-list').append('<option class="'+item.fee + '"' +'data-tokens="'+ item.country+'">' + item.country +'</option>')
        })
    
        $('.selectpicker').selectpicker();
        },
        error: function (exception) {
                console.log(exception);
        }
});