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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

JavaScript

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

Q&A

解決済

1回答

5492閲覧

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

taste

総合スコア12

HTML5

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

JavaScript

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

0グッド

1クリップ

投稿2017/10/07 07:47

編集2017/10/07 09:56

###プルダウンで選択した項目にあった画像を表示したい
プログラミング初心者です。

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

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

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

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

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

よろしくお願いします。
###プログラム
HTML5

lang

1<!DOCTYPE html> 2<html> 3 <html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <title>pulldown</title> 7 <script src="pulldown.js"></script> 8 <link rel="stylesheet" type="text/css" href="css.css"> 9 </head> 10 <body bgcolor="d3d3d3"> 11 <!--header--> 12 <header> 13 <form action="#" id="form"> 14 <div> 15 <label for="select1">Alpha:</label> 16 <select name="select1" id="select1"> 17 <option value="">--</option> 18 <option value="A">A</option> 19 <option value="B">B</option> 20 <option value="C">C</option> 21 </select> 22 </div> 23 <div> 24 <label for="select2">Number:</label> 25 <select name="select2" id="select2"> 26 <option value="">--</option> 27 </select> 28 </div> 29 </form> 30 31 <form> 32 <div> 33 <button type="submit">確定</button> 34 </div> 35 </form> 36 37 38 </header> 39 <!--image--> 40 <a class="jpg" href="A1.jpg"><img src="A1.jpg" alt=""></a> 41 <a class="jpg" href="A2.jpg"><img src="A2.jpg" alt=""></a> 42 <a class="jpg" href="A3.jpg"><img src="A3.jpg" alt=""></a> 43 <a class="jpg" href="B1.jpg"><img src="B1.jpg" alt=""></a> 44 <a class="jpg" href="B2.jpg"><img src="B2.jpg" alt=""></a> 45 <a class="jpg" href="B3.jpg"><img src="B3.jpg" alt=""></a> 46 <a class="jpg" href="C1.jpg"><img src="C1.jpg" alt=""></a> 47 <a class="jpg" href="C2.jpg"><img src="C2.jpg" alt=""></a> 48 <a class="jpg" href="C3.jpg"><img src="C3.jpg" alt=""></a> 49 50 51 </body> 52</html>

pulldown.js

lang

1(function(){ 2 document.addEventListener('DOMContentLoaded', function(){ 3 var select2Choices = { 4 '':['--'], 5 'A':['all','A1','A2','A3'], 6 'B':['all','B1','B2','B3'], 7 'C':['all','C1','C2','C3'], 8 } 9 10 var select1 = document.querySelector('#select1'); 11 var select2 = document.querySelector('#select2'); 12 13 select1.addEventListener('change', function(event){ 14 var choices = select2Choices[event.target.value]; 15 for(var i = select2.length; i>=0; i--){ 16 select2.remove(i); 17 } 18 19 choices.forEach(function(choice){ 20 select2.add(new Option(choice,choice)); 21 }); 22 }); 23 select1.dispatchEvent(new Event('change')); 24 }); 25})(); 26

css.css

lang

1/* header */ 2header{ 3 padding: 30px; 4 background: #333; 5 color: #FFF 6} 7 8 9/* aspect & max size */ 10a.jpg img { 11width: auto; 12height: auto; 13max-width: 350px; 14max-height: 350px; 15vertical-align: middle; 16}

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/10/07 08:13

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

2017/10/07 10:01

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

回答1

0

ベストアンサー

サーバに送るものがなければ 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 10:41

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taste

2017/10/09 05:40 編集

ありがとうございます。回答していただいた通りにやってみたのですが、HTML側でボタンを <button type="button" id="btn">確定</button> としました。 JavaScript側を作ってみたのですが document.getElementById('btn').addEventListener('click',function(){ var choicesResult = {       //ここの中身がわからない } },false); という状況になっております。 申し訳ありませんが、よろしければ細かく教えていただけると嬉しいです。
kei344

2017/10/09 05:51

ベストアンサーをはずすと表示的には「-5」となるため、確認しない時点でベストアンサーをつけるのはあまりしないほうが良いと思います。 「//ここの中身がわからない」では何がどう分らないのかがわかりません。tasteさんの提示されているコード中にはセレクト要素の内容を取得する記述がありますが、ご自身で書かれたのではないのでしょうか。
taste

2017/10/09 06:09

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

2017/10/09 06:17

document.getElementById('select1').value と書けば値の取得はできます。コードを書くことは簡単なのですが、JavaScriptでHTMLを扱う基礎の部分なので、入門書などで体系的に学習されることをお勧めします。 Webの情報は「体系立てた情報」で無いことが多いので、本屋で入門書から上級まで何冊か本を買って読むと今後の理解が進むと思います。とりあえず最初はわからないことのほうが多いと思いますが、そのうち腑に落ちることも多いはずなのでお勧めします。
taste

2017/10/09 07:36

アドバイスありがとうございます。 document.getElementById('btn').addEventListener('click',function(){ var choicesResult = document.getElementById('select2').value; },false); としてみたのですがこれは取得できて居るのでしょうか。 choicesResultを出力してみてもなにも出ないのですが、これはうまく取得できていないということでしょうか。 また、display:noneはCSSに書くほうがいいのかJavaScript内で操作するほうがいいのか、どちらがやりやすいでしょうか 現在入門書を2冊ほど読みながら勉強しております。いまいち理解が足りない部分がありますが、kei344さんのおっしゃるとおり体系的に理解したいと考えているので、努力していきたいです。
kei344

2017/10/09 07: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 で操作することもあります。
taste

2017/10/09 07:59

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問