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

http://www.artmoog.com/
連続した2つのプルダウンを選択すると、選択結果が一覧で表示されるscriptを探しています。
小生初心者なので、あまり応用しなくても使えるサンプルソースがあればご教示いただきたく存じます。

回答の条件
  • URL必須
  • 1人2回まで
  • 13歳以上
  • 登録:2014/04/07 17:42:37
  • 終了:2014/04/09 14:57:43

ベストアンサー

id:a-kuma3 No.3

a-kuma3回答回数4505ベストアンサー獲得回数18702014/04/09 11:35:28

ポイント1500pt

あまりいじりたくない、ということですので、簡単にサンプルを書いてみました。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>

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

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

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

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



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

他2件のコメントを見る
id:a-kuma3

すいません target="_blank" にしたいのですが

こんな感じで。

                $("#product_area").append(
                    "<a href='" + products[i][1] + "' target='_blank'>" +
                                                  // **************** のあたりを追加してます
                    products[i][2] +
                    "</a><br>"
                    );
2014/04/09 15:33:13
id:kazuhiko11

ありがとうございます!

2014/04/09 20:01:15

その他の回答(2件)

id:kicr-pp No.1

kicr-pp回答回数451ベストアンサー獲得回数142014/04/07 17:49:06

エクセル プルダウンの作り方
http://okwave.jp/qa/q2697091.html

id:snow0214 No.2

snow0214回答回数470ベストアンサー獲得回数1162014/04/07 18:57:05

ポイント150pt

まずデータの絞り込みですが、AjaxでDB連携などせず、TABLEのデータを絞り込むという前提で、下のスクリプトが参考になるでしょう。

table内のデータを絞り込めるjQueryプラグイン 

http://64connors.com/?p=26

次に、2つのSELECTを連携させるスクリプトですが、これは下のサイトが参考になります。

選択したプルダウンメニューの内容によって、別のプルダウンを表示・非表示させるサンプル

http://bowz.info/3913

id:kazuhiko11

ありがとうございます。

2014/04/09 14:56:59
id:a-kuma3 No.3

a-kuma3回答回数4505ベストアンサー獲得回数18702014/04/09 11:35:28ここでベストアンサー

ポイント1500pt

あまりいじりたくない、ということですので、簡単にサンプルを書いてみました。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>

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

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

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

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



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

他2件のコメントを見る
id:a-kuma3

すいません target="_blank" にしたいのですが

こんな感じで。

                $("#product_area").append(
                    "<a href='" + products[i][1] + "' target='_blank'>" +
                                                  // **************** のあたりを追加してます
                    products[i][2] +
                    "</a><br>"
                    );
2014/04/09 15:33:13
id:kazuhiko11

ありがとうございます!

2014/04/09 20:01:15

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません