下記サイトのようのプルダウンメニューのように

あまりいじりたくない、ということですので、簡単にサンプルを書いてみました。jQuery を使ってます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/* 商品データ */
var product_data = [
    /*  [商品コード     URL                 商品名          対応機種 (複数ある場合は | で区切る) ] */
        ["M-0001",      "m-0001.html",      "商品あ",       "A001"],
        ["M-0002",      "m-0002.html",      "商品い",       "A002"],
        ["M-0003",      "m-0003.html",      "商品う",       "A003"],
        ["M-0004",      "m-0004.html",      "商品え",       "A004"],
        ["M-0010",      "m-0010.html",      "商品か",       "A001|A002"],
        ["M-0020",      "m-0010.html",      "商品き",       "A003|A004"],
        ["M-9999",      "m-9999.html",      "商品んんん",   "A001|A002|A003|A004"],
        ["OO-01",       "oo-0001.html",     "商品イ",       "BX-01"],
        ["OO-02",       "oo-0002.html",     "商品ロ",       "BX-01|BX-02"],
        ["OO-03",       "oo-0003.html",     "商品ハ",       "BX-01|BX-02|BX-03"],
        ["PX-A-001",    "px-0001.html",     "商品Ａ",       "XX-C-1|XX-C-2"],
        ["PX-A-002",    "px-0002.html",     "商品Ｂ",       "XX-C-1|XX-C-2|XX-C-3"],
        ["PX-A-003",    "px-0003.html",     "商品Ｃ",       "XX-C-4|XX-C-5"],
    ];

/* メーカーと機種のデータ */
var maker_model = {
        "A社" : [
            "A001",
            "A002",
            "A003",
            "A004",
            ],
        "B社" : [
            "BX-01",
            "BX-02",
            "BX-03",
            ],
        "C社" : [
            "XX-C-1",
            "XX-C-2",
            "XX-C-3",
            "XX-C-4",
            "XX-C-5",
            ],
    };


$(function() {
    // 機種から商品データを取り出すマップを作る
    var model_product_map = {};
    for (var i in product_data) {
        var models = product_data[i][3].split("|");
        for (var j in models) {
            var ar = model_product_map[models[j]];
            if (! ar) {
                ar = [];
            }
            ar.push(product_data[i]);
            model_product_map[models[j]] = ar;
        }
    }

    // メーカー選択のプルダウンを作る
    $("#select_maker").html("<option>-- 選択してください --</option>");
    for (var i in maker_model) {
        $("#select_maker").append(
            "<option value='" + i + "'>" + i + "</option>"
            );
    }

    // メーカー選択時の処理
    $("#select_maker").on("change", function() {

        // 機種選択のプルダウンを作る
        $("#product_area").html("");
        $("option:selected", this).each(function() {
            $("#select_model").html("<option>---------- 選択してください ----------</option>");
            var models = maker_model[this.value]
            for (var i in models) {
                $("#select_model").append(
                    "<option value='" + models[i] + "'>" +
                    models[i] +
                    "</option>"
                    );
            }
        });
    });

    // 機種選択時の処理
    $("#select_model").on("change", function() {

        // 商品のリンクを作る
        $("#product_area").html("");
        $("option:selected", this).each(function() {
            var products = model_product_map[this.value];
            for (var i in products) {
                $("#product_area").append(
                    "<a href='" + products[i][1] + "'>" +
                    products[i][2] +
                    "</a><br>"
                    );
            }
        });
    });
});
</script>

<style>
#select_maker, #select_model {
    font-size: 9pt;
}
#product_area {
    padding-top: 1em;
    padding-left: 8ex;
}
</style>


<div id="condition_area">
    メーカー
    <select id="select_maker">
    </select>
    機種
    <select id="select_model">
        <option>---------- 選択してください ----------</option>
    </select>
</div>
<div id="product_area">
</div>

前提にしているのは、機種がユニークになっていること。つまり、同じ機種名だけど、複数のメーカーにあるというのを考慮してません。

データは、商品のデータ（対応する機種を含む）と、メーカーと機種の対応のデータのふたつ持ってます。
商品のデータは、以下の四つから構成されます。

1. 商品コード（使ってないですけど）
2. リンクするURL
3. リンクに表示する商品名
4. 対応機種（複数ある場合には "|" で区切る）

メーカーと機種のデータは、単純に表示名を対応させるだけ（コードを持たない）にしてみました。



jsFiddle で、動作を確認したのがこちらです。
http://jsfiddle.net/a_kuma3/YnVP3/embedded/result/