###プルダウンで選択した項目にあった画像を表示したい
プログラミング初心者です。
作りたいプログラムなのですが、
[プルダウンメニューで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}
回答1件
あなたの回答
tips
プレビュー