javascript - 使用 HTML 表单提前输入 - 根据选择自动填充下一个单元格

Question

我正在使用带有 HTML 表单的 Twitter bootstrap-typeahead 插件:

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

效果很好。我希望该行中的下一个单元格(这是一个选择菜单)根据用户在前一个单元格中的选择自动选择一个选项。这是一个例子:

http://jsfiddle.net/WNpy5/

如果用户输入“新南威尔士州”作为州，我希望将国家/地区设置为“澳大利亚”，但可以使用选择菜单更改此设置。同样，如果用户选择“加利福尼亚”，我希望将国家/地区设置为“美国”。

我可以轻松扩展用于 typehead State 字段的值数组，以包含相应的国家/地区值(但不确定格式)，但不确定这是否可行以及如何将它们连接在一起？

Answer 1

您需要一个包含各个国家/地区及其各自州的对象的 javascript 数组:

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

演示: http://jsfiddle.net/WNpy5/1/

在演示中，当输入州并且焦点从文本框移开时，它会自动选择国家/地区。