Bootstrap Form Helpers - State Picker - Select Class

Question

I'm trying to integrate the Forum Helpers into my Bootstrap application but am having some problems getting anything with the <select></select> to work. I've included all of the .js files, and the date picker / slider work perfectly but they are just <div></div> layers.

Here is a link to their "documentation": Bootstrap Form Helpers

Do I need to include the individual -states, -countries, etc.. .js files in order for this to work? All I'm trying to use is...

<select class="form-control bfh-states" data-country="US" data-state="CA"></select>

... to call in the select but nothing is being populated in it.

Answer 1

I looked into the issue and it turns out not only do you need to include some form of Bootstrap's JS (your bootstrap.js is fine), you also need to include bootstrap-formhelpers.js along with bootstrap-formhelpers-states.js. There is also some CSS included, as well.

I have it all working in a fiddle below : http://jsfiddle.net/k7Zjd/4/

You'll notice example 1 is different, however - it seems that formhelpers was made in mind for 2.3.0; without manually starting it up with .bfhstates({country:'US',state:'CA'}); it never loaded for me - it also seems like formhelpers forces every instance of .bfhstates to be null if you attempt, for example, $('.bfhstates');

HTML - bfh-select-fix is just a class I used to target the select element - bfh-states will return null and we don't want to trigger every form-control. (.form-control.bfh-states also returns null, etc.)

<select class="form-control bfh-select-fix bfh-states"></select>

JS - Initializes the state selector the manual way.

$('.bfh-select-fix').bfhstates({country:'US', blank:false});

Edit - I don't mean to assume you're using Bootstrap 3 - my fiddle is, however, it shouldn't make a difference. I could look into it further as to why example 1 doesn't appear to work, though.