[解決済み] javascriptのルックアップテーブルを作成する簡単な方法はありますか？

質問

javascriptを使用して、いくつかの次元に対して値を検索する簡単な方法を探しています。

例えば、（ここでは商品と商品オプションを使って説明します。）

Colour  Size Price

Blue    S    £45

Blue    L    £98

Red     S    £65

Red     L    £31

そこで、ページ上にいくつかのドロップダウンを用意しました。

Colour: Blue, Red

Size:   Small, Large

で～、知りたいのは...ブルー＋スモールの場合、値段はいくらなのか？

ドロップダウンの順番や、データベースから色とサイズを取り出す順番がわかりません。

javascriptのデータは、このような配列になっているのではないでしょうか。

{Colour:Blue, Size:Medium, Price:48},{Colour:Blue, Size:Large, Price:82}

粗雑な例ですが、javascriptでこれを実現する簡単な方法を考えつきません。

解決方法は？

ページロード時に価格を二次元マップに表示することができます。 フィドル ).

1) selectの値をプリロードする必要がある場合に備えて、ルックアップテーブルに入れました。

var tables = {
    Colour: ["Blue", "Red"],
    Size: ["Small", "Medium", "Large"]
};

2) これが配列形式の価格表です。

var array = [
    {Colour: "Blue", Size: "Small", Price: 45},
    {Colour: "Blue", Size: "Medium", Price: 48},
    {Colour: "Blue", Size: "Large", Price: 98},
    {Colour: "Red", Size: "Small", Price: 65},
    {Colour: "Red", Size: "Large", Price: 31}
];

3) セレクトの初期化（値の入力とイベント「change」）。

for (var key in tables)
    if (tables.hasOwnProperty(key)) {
        selects[key] = form[key];
        selects[key].addEventListener("change", updateSpan);

        var values = tables[key];
        len = values.length;
        for (i = 0; i < len; i++) {
            var option = document.createElement('option');
            option.appendChild(document.createTextNode(values[i]));
            form[key].appendChild(option);
        }
    }

4) 価格テーブルのインデックスを作成する。

len = array.length;
for (i = 0; i < len; i++) {
    var record = array[i];

    if (typeof map[record.Colour] === 'undefined')
        map[record.Colour] = {};

    map[record.Colour][record.Size] = record.Price;
}

5) 関数 updateSpan (セレクト変更時)。

function updateSpan() {
    var Colour = selects.Colour.options[selects.Colour.selectedIndex].value;
    var Size = selects.Size.options[selects.Size.selectedIndex].value;

    if (typeof map[Colour] !== 'undefined' && typeof map[Colour][Size] !== 'undefined')
        span.textContent = map[Colour][Size];
    else
        span.textContent = "Price not defined to Colour: " + Colour + " and Size: " + Size + ".";
}

6) デバッグ（ChromeやFirefoxでF12を押して、コンソールビューを開く）。

完全なインデックス付きテーブル。

console.log(map);

ブルー」& 「スモール」の価格だけです。

console.log(map['Blue']['Small']); // outputs the value: 45