プルダウンの選択肢によって、表示非表示を切り替えたい

コードを見る限り、かなり勉強不足かなと思います。

JavaScriptの基礎以前に、
HTMLの一番基礎から理解が足りていないようです。

やりたいことからぶつかってみるのも良いことですが、
ある程度の基礎をおさえずにここまで作り込んでしまうと、
原因が多すぎて自分では要因が特定できなくなってしまいますよ。

記載コードには間違いが3つあります。

(1)
まずHTMLの基本ルールとして、idの先頭に数字は利用できません。

なので下記コードでは002x002
003x003に変えています。

(2)
display_ege()が定義されていますが、
どこからも呼び出されていないので、意味のないコードになっています。

なので下記コードでは#x002onchange="display_ege()"を追加しています。
onchangeの意味は調べてください。

(3)
let element = document.getElementById('002');は、
Elementオブジェクトを指定しているだけになるので、
selectedの値を取得することにはなりません。

なので下記コードではlet element = $('#x002').val();に変更しています。

js

1<div class="group_outer">2 <h2 class="legend">現在の年齢</h2>3 <div class="input">4 <select id="x002" name="002" title="現在の年齢" onchange="display_ege()" required>5 <option value="">--なし--</option>6 <option value=" 6">6</option>7 <option value="7">7</option>8 <option value="8">8</option>9 <option value="9">9</option>10 <option value="10">10</option>11 <option value="11">11</option>12 <option value="12">12</option>13 <option value="13">13</option>14 <option value="14">14</option>15 <option value="15" selected>15</option>16 <option value="16">16</option>17 <option value="17">17</option>18 <option value="18">18</option>19 <option value="19">19</option>20 <option value="20">20</option>21 </select>22 </div>23</div>24 25<div class="high_school_student">26 <div class="group_outer">27 <select id="x003" name="003"">28 <option value="">--なし--</option>29 <option value=" はい">はい</option>30 <option value="いいえ">いいえ</option>31 </select>32 </div>33</div>34 35<script>36 function display_ege() {37 38 let element = $('#x002').val();39 40 if (element == "18" || element == "19" | element == "20") {41 $('.high_school_student').addClass('active');42 } else {43 $('.high_school_student').removeClass('active');44 }45 }46</script>

コメントを投稿

0 コメント