CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-selectbootstrap-selectpicker
Anjali
Anjali

Reputation: 31

option values in bootstrap select are displayed outside the dropdown

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

enter image description here

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>

Upvotes: 3

Views: 2403

Answers (2)

Bonifacius Sarumpaet
Bonifacius Sarumpaet

Reputation: 1631

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

Upvotes: 2

AngYC
AngYC

Reputation: 3933

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

Upvotes: 1

Related Questions