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

Javascript 使用HTML表单提前键入-根据选择自动填充下一个单元格,javascript,jquery,html,Javascript,Jquery,Html,我将Twitter引导程序typeahead插件与HTML表单一起使用: 这很有效。我希望行中的下一个单元格(选择菜单)根据用户在上一个单元格中的选择自动选择为选项。下面是一个例子: 如果用户输入该州的“新南威尔士州”,我希望该国家设置为“澳大利亚”,但可以使用选择菜单更改此选项。同样,如果用户选择“California”,我希望国家设置为“USA” 我可以很容易地扩展用于typehead State字段的值数组,以包括相应的国家值(但不确定格式),也不确定这是否可行以及如何将其联系在一起?

我将Twitter引导程序typeahead插件与HTML表单一起使用:

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

如果用户输入该州的“新南威尔士州”,我希望该国家设置为“澳大利亚”,但可以使用选择菜单更改此选项。同样,如果用户选择“California”,我希望国家设置为“USA”


我可以很容易地扩展用于typehead State字段的值数组,以包括相应的国家值(但不确定格式),也不确定这是否可行以及如何将其联系在一起?

您需要一个javascript对象数组,用于具有各自国家的国家:

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


在演示中,当输入状态并且焦点从文本框移开时,它会自动选择国家。

默认情况下,typeahead插件只接受字符串列表。我创建了一个扩展来接受JSON对象数组,我相信这就是您正在寻找的特性

资料来源如下:

您的案例示例如下:

var states = [{ state: 'NY', country: 'USA'}, 
              { state: 'Ontario', country: 'Canada'}, 
              { state: 'Petoria', country: 'Petoria'}];

$('#myTextBox').typeahead({
    source: states,
    display: 'state',
    val: 'country',
    itemSelected: function(item, val, text) {
        // val = name of the country
        // text = name of the provice
        $('#Country').val(val);
    }
});

谢谢Terry,我会查看你的插件扩展-看起来很有希望。