0

私はHTMLフォームでTwitterbootstrap-typeaheadプラグインを使用しています：

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

これはうまく機能しています。行の次のセルである選択メニューを、前のセルでのユーザーの選択に基づいてオプションに自動的に選択されるようにしたいと思います。次に例を示します。

http://jsfiddle.net/WNpy5/

ユーザーが州の「ニューサウスウェールズ」を入力した場合、国を「オーストラリア」に設定したいのですが、選択メニューを使用してこれを変更するオプションがあります。同様に、ユーザーが「カリフォルニア」を選択した場合、国を「米国」に設定したいと思います。

タイプヘッドのStateフィールドに使用される値の配列を簡単に拡張して、対応する国の値を含めることができます（ただし、形式はわかりません）。これが可能かどうか、およびすべてを結び付ける方法がわかりません。

4

2 に答える 2

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/

デモでは、状態が入力され、フォーカスがテキストボックスから移動すると、国が自動的に選択されます。

于 2012-06-12T18:36:41.580 に答える
1

typeaheadプラグインは、デフォルトでは文字列のリストのみを取ります。私はあなたが探している機能であると私が信じるJSONオブジェクトの配列を受け入れる拡張機能を作成しました。

ソースはここにあります：https ：//github.com/tcrosen/twitter-bootstrap-typeahead

あなたの場合の例は次のとおりです。

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);
    }
});
于 2012-06-12T18:44:18.557 に答える