1

我正在使用来自 Bootstrap 表单助手的国家选择器： 国家选择器

问题是我需要用一个国家动态初始化它。我使用 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>
4

2 回答 2

2

从示例 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>

于 2018-03-14T16:09:34.407 回答
1

使用下面的 html 在初始化时选择默认国家。还要在您的 html 中添加bootstrap-formhelpers.js和bootstrap-formhelpers.css，否则您的选择将不会填充数据。

<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');

有关初始化的更多选项，请参阅文档。这是一个工作小提琴。

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

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

因此反映变化；

  $('#country-select').val('TN').trigger('change');
于 2018-03-15T10:31:14.843 回答