同一页面使用两个Bootstrap国家选择器均无法填充的问题求助

算力阿峰

2026-5-22

解决bfh-countries多选择器无法填充选项的问题

我之前也踩过bfh-countries插件的这个坑！当添加第二个不同ID的国家选择器后两个都失效，大概率是因为插件的自动初始化逻辑只处理了第一个匹配元素，或者多个元素之间的初始化流程发生了冲突。下面是我亲测有效的解决方法：

原因分析

bfh-countries这类基于jQuery的表单插件，默认会在页面加载时自动初始化第一个匹配.bfh-countries类的元素，但当存在多个同类别元素时，自动初始化的逻辑可能会遗漏后续元素，或者多个实例的初始化流程互相干扰。

解决方案：手动初始化每个国家选择器

放弃插件的自动初始化机制，改为手动调用初始化方法，确保每个选择器都能被独立正确处理：

步骤1：保留HTML结构（无需大改）

保持你的两个选择器代码，确保每个都有唯一ID和正确的类名：

<label for="CLInput">Country 1</label>
<select class="form-control bfh-countries" id="CLInput"></select>

<label for="CLInput2">Country 2</label>
<select class="form-control bfh-countries" id="CLInput2"></select>

注：可以去掉data-country属性，避免自动初始化和手动初始化冲突，后续在JS中配置默认国家即可

步骤2：添加手动初始化的JS代码

确保在DOM完全加载后，分别初始化每个选择器（bfh系列插件大多依赖jQuery，所以用jQuery示例更通用）：

$(document).ready(function() {
  // 初始化第一个国家选择器，默认选中荷兰（NL）
  $('#CLInput').bfhcountries({
    country: 'NL'
  });
  
  // 初始化第二个国家选择器，默认选中美国（US）
  $('#CLInput2').bfhcountries({
    country: 'US'
  });
});