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

Posted 2023-05-08

【中文标题】引导选择中的选项值显示在下拉列表之外

【英文标题】：option values in bootstrap select are displayed outside the dropdown

【发布时间】：2018-04-17 20:44:29

【问题描述】：

我有时在我的 html 页面中遇到问题，其中引导选择中的所有选项都显示在下拉框之外。 （附上截图） 下拉菜单

这个问题只是偶尔观察到。这些值是从 api 调用中填充的。 这是我的引导选择 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

下面是我的代码 sn-ps。

$.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- data-style="btn-success" data-dropup-auto="false" standard title="Select Country...">

                                </select>

                            </div>

【问题讨论】：

能否提供截图或更多代码？似乎没有足够的代码来解决问题

添加了截图..

【参考方案1】：

似乎是bootstrap-select必须重新呈现并在动态加载选项时刷新

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

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

【讨论】：

即使添加了这个，我仍然面临问题

【参考方案2】：

因此，当您使用 selectpicker 类时，它将使用 SAME CLASS 与您的选择元素创建按钮元素兄弟姐妹。因此，当您仅针对类时，它将同时更新它们。在附加部分使用选择器：$(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);
        
);