[JavaScript][PHP]項目の表示切替がうまくいかない

前提・実現したいこと

メニューの「アイテムの種類を選択」で「スカート」を選択したときのみ「スカートの丈を選択」というメニューが表示されるようにしたいのですが、常に表示されてしまいます。問題点のご指摘よろしくお願いします。

該当のソースコード

PHP
1 <form action="kakunin.php" method="POST"><!--2で処理を行う-->
2          <p>  
3            名称
4          </p>
5          <p>
6            <input class="name" type="text" name="name" placeholder=他のアイテムと被らないようにしよう>
7          </p>
8          <p>色を選択</p>
9          <p>
10            <select class="color" name="color">
11              <option value="赤">赤系</option>
12              <option value="黒">黒系</option>
13              <option value="白">白系</option>
14            </select>
15          </p>
16
17          <p>アイテムの種類を選択</p>
18          <p>
19            <select class="kind" name="kind">
20              <option id="zubon" value="ズボン" onclick="s_takeradio('none');">ズボン</option>
21              <option id="skato" value="スカート" onclick="s_takeradio('inline');">スカート</option>
22              <option id="auta" value="アウター" onclick="s_takeradio('none');">アウター</option>
23            </select>
24          </p>
25
26          <script src="toroku.js">
27          </script>
28          
29          <div class=s_take>
30          <p>スカートの丈</p>
31          <p>
32            <select class="take_take" name="take">
33              <option id="nashi" value="指定しない">指定しない</option>
34              <option id="hiza" value="膝">膝</option>
35              <option id="hizaue" value="膝上">膝上</option>
36              <option id="hizasita" value="膝下">膝下</option>
37            </select>
38          </p>
39          </div>
40          <input type="submit" name="confirm" value="確認する" class="button"/>
41        </form>

JavaScript
1function s_takeradio( disp ) {
2    if(sukato.checked){
3    document.getElementById('s_take').style.display ="";
4  }
5    else{
6        document.getElementById('s_take').style.display ="none";
7    }
8}

行動規範の内容に同意します

回答1件

ベストアンサー

スカート以外を選択したときに丈はdisabledしないとへんなデータが送られちゃいますね

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('select[name=kind]').addEventListener('change',e=>{
4    const flg=e.target.value!=="スカート";
5    document.querySelector('select[name=take]').disabled=flg;
6    document.querySelector('.s_take').toggleAttribute('hidden',flg);
7
8  });
9});
10</script>
11<form>
12<div>
13名称:<input class="name" type="text" name="name">
14</div>
15<div>色を選択
16<select class="color" name="color">
17<option value="赤">赤系</option>
18<option value="黒">黒系</option>
19<option value="白">白系</option>
20</select>
21</div>
22<div>
23アイテムの種類を選択:
24<select class="kind" name="kind">
25<option value="ズボン">ズボン</option>
26<option value="スカート">スカート</option>
27<option value="アウター">アウター</option>
28</select>
29</div>
30<div class="s_take" hidden>
31スカートの丈:
32<select class="take_take" name="take" disabled>
33<option value="指定しない">指定しない</option>
34<option value="膝">膝</option>
35<option value="膝上">膝上</option>
36<option value="膝下">膝下</option>
37</select>
38</div>
39<input type="submit" name="confirm" value="確認する" class="button">
40</form>