質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    16486questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4030questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

プルダウンで選択した項目にあった画像を表示したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 913

taste

score 4

プルダウンで選択した項目にあった画像を表示したい

プログラミング初心者です。

作りたいプログラムなのですが、

[プルダウンメニューでA->allを選択して、確定ボタンを押した時]
A1.jpgとA2.jpgとA3.jpgが表示される

[プルダウンメニューでB->B3を選択して、確定ボタンを押した時]
B3.jpgが表示される

というシステムを実装したいのですが、どのようにして
「確定ボタンを押した時にプルダウンメニューで選択している内容を読み込むのか」
「画像にどのようなタグをつければ上記のように動作するのか」
などということがわかりません。

もし、そもそも現在の構成では難しいのであれば別の方法を教えていただけるとうれしいです。

よろしくお願いします。

プログラム

HTML5

<!DOCTYPE html>
<html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>pulldown</title>
        <script src="pulldown.js"></script>
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body bgcolor="d3d3d3">
        <!--header-->
        <header>
            <form action="#" id="form">
                <div>
                    <label for="select1">Alpha:</label>
                    <select name="select1" id="select1">
                        <option value="">--</option>
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                    </select>
                </div>
                <div>
                    <label for="select2">Number:</label>
                    <select name="select2" id="select2">
                        <option value="">--</option>
                    </select>
                </div>
            </form>

            <form>
                <div>
                    <button type="submit">確定</button>
                </div>
            </form>


        </header>
        <!--image-->
        <a class="jpg" href="A1.jpg"><img src="A1.jpg" alt=""></a>
        <a class="jpg" href="A2.jpg"><img src="A2.jpg" alt=""></a>
        <a class="jpg" href="A3.jpg"><img src="A3.jpg" alt=""></a>
        <a class="jpg" href="B1.jpg"><img src="B1.jpg" alt=""></a>
        <a class="jpg" href="B2.jpg"><img src="B2.jpg" alt=""></a>
        <a class="jpg" href="B3.jpg"><img src="B3.jpg" alt=""></a>
        <a class="jpg" href="C1.jpg"><img src="C1.jpg" alt=""></a>
        <a class="jpg" href="C2.jpg"><img src="C2.jpg" alt=""></a>
        <a class="jpg" href="C3.jpg"><img src="C3.jpg" alt=""></a>


    </body>
</html>


pulldown.js

(function(){
    document.addEventListener('DOMContentLoaded', function(){
        var select2Choices = {
            '':['--'],
            'A':['all','A1','A2','A3'],
            'B':['all','B1','B2','B3'],
            'C':['all','C1','C2','C3'],
        }

        var select1 = document.querySelector('#select1');
        var select2 = document.querySelector('#select2');

        select1.addEventListener('change', function(event){
            var choices = select2Choices[event.target.value];
            for(var i = select2.length; i>=0; i--){
                select2.remove(i);
            }

            choices.forEach(function(choice){
                select2.add(new Option(choice,choice));
            });
        });
        select1.dispatchEvent(new Event('change'));
    });
})();


css.css

/* header */
header{
    padding: 30px;
    background: #333;
    color: #FFF
}


/* aspect & max size */
a.jpg img {
width: auto;
height: auto;
max-width: 350px;
max-height: 350px;
vertical-align: middle;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/10/07 17:13

    「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

    キャンセル

  • taste

    2017/10/07 19:01

    助言ありがとうございます。初めての質問でしたので不慣れなところがあると思います。まだ不明な点がありましたら指摘していただけるど幸いです。

    キャンセル

回答 1

checkベストアンサー

+1

サーバに送るものがなければ form は不要です。
<button type="button">確定</button> は submit でなく button で良い。


「確定ボタンを押した時にプルダウンメニューで選択している内容を読み込むのか」

「確定」ボタンにクリックイベントをつけて、その関数内でプルダウンの内容を読めばよいです。(すでに addEventListener を使われているので、使い方はほぼ同じです)


「画像にどのようなタグをつければ上記のように動作するのか」

<a class="jpg" id="A1" href="A1.jpg"><img src="A1.jpg" alt=""></a> とでもしておいて、取得して、display:none にすれば非表示になります。(display:none 用のクラスを作っておいて割り当てるでも良い)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/07 20:00 編集

    ありがとうございます。回答していただいた通りにやってみたのですが、HTML側でボタンを

    <button type="button" id="btn">確定</button>

    としました。
    JavaScript側を作ってみたのですが

    document.getElementById('btn').addEventListener('click',function(){
    var choicesResult = {
          //ここの中身がわからない
    }
    },false);

    という状況になっております。
    申し訳ありませんが、よろしければ細かく教えていただけると嬉しいです。

    キャンセル

  • 2017/10/09 14:51

    ベストアンサーをはずすと表示的には「-5」となるため、確認しない時点でベストアンサーをつけるのはあまりしないほうが良いと思います。

    「//ここの中身がわからない」では何がどう分らないのかがわかりません。tasteさんの提示されているコード中にはセレクト要素の内容を取得する記述がありますが、ご自身で書かれたのではないのでしょうか。

    キャンセル

  • 2017/10/09 15:09

    そうだったのですね、サイトのシステムを理解していませんでした。すみません。

    このコードなのですが人から教えてもらったものでして、構造についてははっきりとは理解できていないのです。
    ボタンがクリックされた時、プルダウンメニューで選ばれている内容を読み取って、それに適合する画像以外にdisplay:noneを適用するということは理解できたのですが、それを実現するコードが組めず悩んでいます。
    お手数ですが細かく教えていただくことは出来ないでしょうか。

    キャンセル

  • 2017/10/09 15:17

    document.getElementById('select1').value と書けば値の取得はできます。コードを書くことは簡単なのですが、JavaScriptでHTMLを扱う基礎の部分なので、入門書などで体系的に学習されることをお勧めします。

    Webの情報は「体系立てた情報」で無いことが多いので、本屋で入門書から上級まで何冊か本を買って読むと今後の理解が進むと思います。とりあえず最初はわからないことのほうが多いと思いますが、そのうち腑に落ちることも多いはずなのでお勧めします。

    キャンセル

  • 2017/10/09 16:36

    アドバイスありがとうございます。
    document.getElementById('btn').addEventListener('click',function(){
    var choicesResult = document.getElementById('select2').value;
    },false);
    としてみたのですがこれは取得できて居るのでしょうか。
    choicesResultを出力してみてもなにも出ないのですが、これはうまく取得できていないということでしょうか。

    また、display:noneはCSSに書くほうがいいのかJavaScript内で操作するほうがいいのか、どちらがやりやすいでしょうか

    現在入門書を2冊ほど読みながら勉強しております。いまいち理解が足りない部分がありますが、kei344さんのおっしゃるとおり体系的に理解したいと考えているので、努力していきたいです。

    キャンセル

  • 2017/10/09 16:48

    > 取得できて居るのでしょうか。
    > choicesResultを出力してみてもなにも出ない

    【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】
    http://ryus.co.jp/blog/customize-php-search-1/

    【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
    http://www.buildinsider.net/web/chromedevtools/01

    【Chrome デベロッパーツールの使い方概要 | Web Tips】
    http://weback.net/utility/1410/


    > また、display:noneはCSSに書くほうがいいのかJavaScript内で操作するほうがいいのか、どちらがやりやすいでしょうか
    「表示の状態を切り替える」という作業であれば「CSSに書くほう」が良いです。リアルタイムに状態を変えたい場合には JavaScript で操作することもあります。

    キャンセル

  • 2017/10/09 16:59

    丁寧にコードについてだけでなく勉強方法まで教えていただきありがとうございました。
    手探りの状態ですがなんとかこのプログラムを完成させたいと思います。
    本当にありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16486questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4030questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。