###前提・実現したいこと
2段階のセレクトボックスを利用して、2個目のセレクトボックスで選択された説明文を表示したいと思っています。
###発生している問題・エラーメッセージ
ここの投稿「[https://teratail.com/questions/48538]の内容を参考に作成させていただきました。
読み込み時の路線および駅選択で説明表示はうまくいくのですが、他の路線名を選択し、駅を選択すると、その前に選択していた駅情報が残ったままになってしまいます。
選択した駅情報だけを表示させる方法を教えていただけると幸いです。
###該当のソースコード
js
1$(function(){ 2 // 全ての駅名を非表示にする 3 $(".station").addClass('hide'); 4 // 路線のプルダウンが変更されたら 5 $("#parent").change(function(){ 6 // 全ての駅名を非表示にする 7 $(".station").addClass('hide'); 8 $("boxArea.kbox").addClass('hide'); 9 $("boxArea.nbox").addClass('hide'); 10 $("boxArea.sbox").addClass('hide'); 11 // 選択された路線に連動した駅名プルダウンを表示する 12 $('#' + $("#parent option:selected").attr("class")).removeClass("hide"); 13 }); 14 15//A路線で選択された詳細表示 16 var selectk = document.getElementById('k'); 17 selectk.addEventListener('change', function () { 18 var boxes = document.getElementsByClassName('kbox'); 19 var val_k = this.value; 20 for (var i = 0; i < boxes.length; i++) { 21 boxes[i].style.display = (i === parseInt(val_k)) ? 'block' : 'none'; 22 } 23 }); 24//B路線で選択された詳細表示 25 var selectn = document.getElementById('n'); 26 selectn.addEventListener('change', function () { 27 var boxes = document.getElementsByClassName('nbox'); 28 var val_n = this.value; 29 for (var i = 0; i < boxes.length; i++) { 30 boxes[i].style.display = (i === parseInt(val_n)) ? 'block' : 'none'; 31 } 32 }); 33//C路線で選択された詳細表示 34 var selects = document.getElementById('s'); 35 selects.addEventListener('change', function () { 36 var boxes = document.getElementsByClassName('sbox'); 37 var val_s = this.value; 38 for (var i = 0; i < boxes.length; i++) { 39 boxes[i].style.display = (i === parseInt(val_s)) ? 'block' : 'none'; 40 } 41 }); 42}) 43 44```css 45.hide { display: none; } 46.kbox { display: none; } 47.nbox { display: none; } 48.sbox { display: none; } 49 50
html
1<form><select id="parent"> 2<option value="">路線を選択</option> 3<option class="k" value="ku">A路線</option> 4<option class="n" value="nu">B路線</option> 5<option class="s" value="su">C路線</option> 6</select> <select id="k" class="station"> 7<option value="">駅を選択</option> 8<option value="0">A1駅</option> 9<option value="1">A2駅</option> 10<option value="2">A3駅</option> 11<option value="3">A4駅</option> 12<option value="4">A5駅</option> 13<option value="5">A6駅</option> 14</select><select id="n" class="station"> 15<option value="">駅を選択</option> 16<option value="0">B1駅</option> 17<option value="1">B2駅</option> 18<option value="2">B3駅</option> 19</select><select id="s" class="station"> 20<option value="">駅を選択</option> 21<option value="0">C1駅</option> 22<option value="1">C2駅</option> 23<option value="2">C3駅</option> 24<option value="3">C4駅</option> 25<option value="4">C5駅</option> 26</select></form> 27<div class="boxArea"> 28<div class="kbox">A-01</div> 29<div class="kbox">A-02</div> 30<div class="kbox">A-03</div> 31<div class="kbox">A-04</div> 32<div class="kbox">A-05</div> 33<div class="kbox">A-06</div> 34<div class="nbox">B-01</div> 35<div class="nbox">B-02</div> 36<div class="nbox">B-03</div> 37<div class="sbox">C-01</div> 38<div class="sbox">C-02</div> 39<div class="sbox">C-03</div> 40<div class="sbox">C-04</div> 41<div class="sbox">C-05</div> 42</div> 43
###試したこと
詳細な情報boxのdisplayがblockに変更されているので、それをnoneに変更するように、removeClassなども試しましたが、javascript、jqueryともに勉強不足で、試行錯誤しましたが、どれもうまくいかずでした。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/07 08:16
2017/11/07 08:23
2017/11/07 08:25
2017/11/07 08:27