如何添加Bootstrap Country选择器插件以选择带有标志的国家/地区？

Question

我创建了一个查询构建器，用户可以在其中选择国家/地区。它工作正常：

我想使用带有标志的Bootstrap Country选择器，而不是在列表中键入所有国家/地区的名称。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder/dist/css/query-builder.default.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js"></script>

<div id="builder"></div>
<script>
  $('#builder').queryBuilder({
    plugins: [
      'bt-tooltip-errors',
      'not-group'
    ],

    filters: [{
      id: 'country',
      label: 'country',
      type: 'string',
      input: 'select',
      values: {
        Austria: 'Austria',
        Germany: 'Germany',
        UK: 'UK',
        France: 'France',
        Italy: 'Italy',
        Brasil: 'Brasil',
        India: 'India'
      }

    }]
  });
</script>

<div class="bfh-selectbox bfh-countries" data-flags="true">
</div>

我试图以某种方式插入<div class="bfh-selectbox bfh-countries" data-flags="true"></div>而不是

values: {
  Austria: 'Austria',
  Germany: 'Germany',
  UK: 'UK',
  France : 'France',
  Italy : 'Italy',
  Brasil : 'Brasil',
  India : 'India' }

但没有成功。如何在查询构建器中插入此国家/地区选择器？