###前提・実現したいこと
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件

ベストアンサー

各changeイベント直下に下記を追加してみてください。

javascript
1$(".boxArea div").hide();

追記：
個人的な意見ですが、単にdisplay: none;をしたいだけならjQueryであれば.hide()でした方が分かりやすいと思います。
そこから表示に切り替えたい場合は.show()です。
jQueryと生jsが混じりすぎると可読性が良くないのでどちらかに統一された方が良いかもしれません。
同じようなことを書いている記述も散見されますので、もっとシンプルに書けるかも。

シンプルに作ってみたサンプル

//A路線で選択された詳細表示　～　//C路線で選択された詳細表示
を1つでやりきります。

javascript
1
2    $("select.station").on("change",function(){
3        $(".boxArea div").hide();
4        boxname = this.id+"box";
5        $("."+boxname).eq($(this).val()).show();
6    });