Question

我使用Bootstrap表单助手的国家选择器： Country Picker

问题是我需要用国家/地区动态初始化它。我使用的是data-country =＆＃34; US＆＃34;默认情况下，无论如何我需要在文档就绪功能上更改它。

      <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在初始化时选择默认国家/地区。同时将bootstrap-formhelpers.js和bootstrap-formhelpers.css添加到您的html，或者您的选择不会填充数据。

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

并在初始化后选择国家/地区，

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

请参阅document了解有关启动的更多选项。这是一个working fiddle。

每个OP的评论 OP正在使用select2使用主题，引用

Select2将侦听它所附加元素的更改事件。当您进行需要在Select2中反映的任何外部更改（例如更改值）时，您应该触发此事件。

因此反映变化;

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

Bootstrap Form Helper - 在Country picker上动态选择国家/地区

2 个答案: