Bootstrap 基于国家/地区的表单助手状态选择器

Question

我有 bootstrap 国家/地区选择器（使用 div 标签而不是他们网站上提供的 select 标签）。但是，我无法让州选择器显示基于国家/地区的州选项 selected.

以下是我链接的文件：

<!-- Bootstrap Form Helpers -->
<link href="http://bootstrapformhelpers.com/assets/css/bootstrap-formhelpers.min.css" rel="stylesheet" media="screen">

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!-- Bootstrap -->
<script src="http://bootstrapformhelpers.com/assets/js/bootstrap.min.js"></script>

<!-- Bootstrap Form Helpers -->
<script src="http://bootstrapformhelpers.com/assets/js/bootstrap-formhelpers.min.js"></script>

这里是国家和州的代码。

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

<div class="bfh-selectbox bfh-states" data-country="countries_states1" data-state=" ">

正如我所说，这些国家运作良好，但各州没有任何人口，我需要它们相对于国家 selected.

感谢任何帮助！

Answer 1

我在网上找到了答案，以防其他人在看。删除上面的两个 div 并添加：

<div id="countries_states2" class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
  <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">
  <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>
<div class="bfh-selectbox bfh-states" data-country="countries_states2">
  <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">
  <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

如果您想保留旗帜图标，请将 data-flags="true" 添加到顶部的第一个 div

Bootstrap 基于国家/地区的表单助手状态选择器

Bootstrap Form Helper State Picker Based on Country

html

javascript

jquery

twitter-bootstrap

bootstrap-form-helper