I have the bootstrap Country picker working (using a div tag instead of the select tag provided on their website). However, I can't get the state picker to show state options based on country selected.
Here are the files I have linked:
<!-- 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>
and here is the code for both the countries and states.
<div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
<div class="bfh-selectbox bfh-states" data-country="countries_states1" data-state=" ">
As I said, the countries work fine but the states do not populate anything and I need them to populate in relation to the country selected.
Any help is appreciated!
I found an answer online incase anyone else is looking. Delete the two divs above and add this:
<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>
If you want to keep the flag icon add data-flags="true" into the first div at the top