下記ｻｲﾄのようのﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰのように http://www.artmoog.com/ 連続した2つのﾌﾟﾙﾀﾞｳﾝを選択すると､選択結果が一覧で表示されるscriptを探しています｡小生…

あまりいじりたくない､ということですので､簡単にｻﾝﾌﾟﾙを書いてみました｡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", "商品A", "XX-C-1|XX-C-2"],
 ["PX-A-002", "px-0002.html", "商品B", "XX-C-1|XX-C-2|XX-C-3"],
 ["PX-A-003", "px-0003.html", "商品C", "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>

前提にしているのは､機種がﾕﾆｰｸになっていること｡つまり､同じ機種名だけど､複数のﾒｰｶｰにあるというのを考慮してません｡

ﾃﾞｰﾀは､商品のﾃﾞｰﾀ(対応する機種を含む)と､ﾒｰｶｰと機種の対応のﾃﾞｰﾀのふたつ持ってます｡
商品のﾃﾞｰﾀは､以下の四つから構成されます｡

商品ｺｰﾄﾞ(使ってないですけど)
ﾘﾝｸするURL
ﾘﾝｸに表示する商品名
対応機種(複数ある場合には "|" で区切る)

ﾒｰｶｰと機種のﾃﾞｰﾀは､単純に表示名を対応させるだけ(ｺｰﾄﾞを持たない)にしてみました｡

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

table内のﾃﾞｰﾀを絞り込めるjQueryﾌﾟﾗｸﾞｲﾝ

選択したﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰの内容によって､別のﾌﾟﾙﾀﾞｳﾝを表示･非表示させるｻﾝﾌﾟﾙ