Question

我在html页面中有时会遇到一个问题，其中bootstrap-select中的所有选项都显示在下拉框之外。（附截图）下拉

有时只会观察到此问题。这些值将从api调用中填充。这是我的bootstrap-select css和js参考： 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

以下是我的代码段。

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

似乎必须在动态加载选项时重新渲染和刷新bootstrap-select

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

尝试在成功函数回调的最后一行添加这两行

Answer 2

因此，当您使用selectpicker类时，它将与具有 SAME CLASS 的select元素一起创建按钮元素同级。因此，当您仅定位类时，它将同时更新它们。使用附加部分中的选择器：$（select.country-list）。它将仅更新选择元素。它对我有用。

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

引导选择中的选项值显示在下拉列表

2 个答案: