Bootstrap 表单助手 - Select 国家/地区选择器上的动态国家/地区

Question

我正在使用来自 Bootstrap 表单助手的国家/地区选择器： Country Picker

问题是我需要用一个国家动态初始化它。我默认使用 data-country="US" ，无论如何我需要在文档就绪功能上更改它。

      <div id="country-select" class="bfh-selectbox bfh-countries" data-flags="true" data-value="US">
        <input type="hidden" value="">
        <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
          <span class="bfh-selectbox-option input-medium" data-option=""></span>
          <b class="caret"></b>
        </a>
        <div class="bfh-selectbox-options">
          <input type="text" class="bfh-selectbox-filter">
          <div role="listbox">
          <ul role="option">
          </ul>
          </div>
        </div>
      </div>

Answer 1

从Example 3开始，您可以使用

$(document).ready(function(){
    $('#country-select').bfhcountries({country: 'TN'});
});

$('#LoadCountry').click(function(){
  $('#countries1').bfhcountries({country: 'TN'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.css" rel="stylesheet"/>


<button id='LoadCountry' class="btn">Load Countries</button>
<br><br>
<select id="countries1" class="form-control"></select>

Answer 2

使用下面的 html 来 select 初始化时的默认国家/地区。同时将 bootstrap-formhelpers.js 和 bootstrap-formhelpers.css 添加到您的 html 中，否则您的 select 将不会 填充数据。

<form><select  id="country-select" name="country-select" class="form-control bfh-countries" data-country="US" data-flags="true"></select></form>

并初始化后到select一个国家，

$('#country-select').val('TN');

有关初始化的更多选项，请参阅 document。这是 working fiddle.

根据 OP 的评论 OP 正在使用 select2 的主题，从那里引用

Select2 will listen for the change event on the element that it is attached to. When you make any external changes that need to be reflected in Select2 (such as changing the value), you should trigger this event.

因此要反映变化；

  $('#country-select').val('TN').trigger('change');

Bootstrap 表单助手 - Select 国家/地区选择器上的动态国家/地区

Bootstrap Form Helper - Select country dynamically on Country picker

javascript

jquery

html-select

bootstrap-form-helper