Bootstrap Form Helper国家选择器：动态初始化指定国家问题

嘿，刚好我之前折腾过这个组件，给你说个简单靠谱的实现方式～

首先，咱们之前用data-country="US"静态设置默认国家的写法没问题，但如果要在页面加载时动态修改，直接改data属性是行不通的——因为组件在初始化的时候已经把这个值读进内部状态了，事后改data属性不会同步到组件里。

正确的做法是用Bootstrap Form Helper Country Picker提供的官方API来操作，具体步骤如下：

1. 确认你的HTML结构 #

假设你的Country Picker是这样定义的（建议加个ID方便JS选择）：

<input type="text" class="bfh-countries" data-country="US" id="myCountryPicker">

2. 在document ready里调用setCountry方法 #

直接用jQuery选择器选中组件，然后调用bfhcountries('setCountry', '国家代码')就能动态设置初始国家了。比如我想默认设置为加拿大（代码CA）：

$(document).ready(function() {
  // 动态设置初始国家为加拿大
  $('#myCountryPicker').bfhcountries('setCountry', 'CA');
});

如果你的目标国家代码是从后端或者其他地方动态获取的，比如存在一个变量里，直接替换就行：

$(document).ready(function() {
  // 假设这是从后端拿到的国家代码
  var targetCountryCode = 'GB';
  $('#myCountryPicker').bfhcountries('setCountry', targetCountryCode);
});

特殊场景：销毁后重新初始化 #

如果遇到一些特殊情况（比如组件初始化逻辑有冲突），也可以先销毁原组件，再重新初始化并指定新的默认国家：

$(document).ready(function() {
  // 先销毁已初始化的组件
  $('#myCountryPicker').bfhcountries('destroy');
  // 重新初始化并设置默认国家为澳大利亚（AU）
  $('#myCountryPicker').bfhcountries({ country: 'AU' });
});

记住哦，一定要用组件提供的API方法，不要直接手动修改data-country属性，那样组件不会识别到变化的～

内容的提问来源于stack exchange，提问作者Razinar