Question

I’m using the Twitter bootstrap-typeahead plugin with an HTML form:

http://twitter.github.com/bootstrap/javascript.html#typeahead

which is working well. I would like the next cell in the row, which is a select menu, to be automatically selected to an option based on the user’s selection in the previous cell. Here’s an example:

http://jsfiddle.net/WNpy5/

If the user enters “New South Wales” for the State I would like the Country to be set to “Australia”, but with the option of changing this using the select menu. Likewise if the user selects “California” I would like the Country to be set to “USA”.

I can easily extend the array of values used for the typehead State field to include a corresponding country value (not sure of the format though) and not sure if this is possible and how to tie it all together?

Answer 1

You need a javascript array of objects for countries with their respective states:

var countries = [{ name: 'USA',
                   states: ['Alabama', 'Alaska']},
                 { name: 'Australia',
                   states: ['New South Wales', 'Queensland']}]; // You can add rest of the states here

DEMO: http://jsfiddle.net/WNpy5/1/

In demo, it auto selects country when state is entered and the focus is moved away from textbox.