一度選択された非表示のドロップダウンオプションボックスは消えます

私はここに新しいメンバーとして私を許してください。私はコードを正しく動作させるようには見えません。選択オプションでは、さまざまなサイズの選択が可能です。カスタムサイズを選択すると、非表示のドロップダウンオプションボックスが表示されます。ここで問題となるのは、ドロップダウンオプションボックスが選択されていれば消えます。私は数ヶ月間これを理解しようとしてきました。誰かが私を助けてくれることを願っています。私の前進感謝！一度選択された非表示のドロップダウンオプションボックスは消えます

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>jQuery Show Hide Using Select Box</title> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $("select").change(function() { 
 
     $(this).find("option:selected").each(function() { 
 
      if ($(this).attr("value") == "customsize") { 
 
      $(".customsize").show(); 
 
      } else { 
 
      $(".box").hide(); 
 
      } 
 
     }); 
 
     }).change(); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <div> 
 
    <select name="product[]" style="display: block; width: 256px; border-color: rgb(204, 204, 204); font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif; font-size: 0.9em; padding: 0.3em;"> 
 
     <option>Select Size</option> 
 
     <option style="box-sizing: border-box;" value="30">Chest 30in</option> 
 
     <option style="box-sizing: border-box;" value="32">Chest 32in</option> 
 
     <option style="box-sizing: border-box;" value="34">Chest 34in</option> 
 
     <option style="box-sizing: border-box;" value="36">Chest 36in</option> 
 
     <option style="box-sizing: border-box;" value="38">Chest 38in</option> 
 
     <option style="box-sizing: border-box;" value="40">Chest 40in</option> 
 
     <option value="customsize">Custom Size*</option> 
 
    </select><br /> 
 
    </div> 
 
    <div class="customsize box"> 
 
    <select name="product[]" style="display: block; width: 256px; border-color: #cccccc; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 0.9em; padding: 0.3em;"> 
 
     <option style="box-sizing: border-box;" value=" ">Body Length (in)</option> 
 
     <option style="box-sizing: border-box;" value="30">30</option> 
 
     <option style="box-sizing: border-box;" value="31">31</option> 
 
     <option style="box-sizing: border-box;" value="32">32</option> 
 
     <option style="box-sizing: border-box;" value="33">33</option> 
 
     <option style="box-sizing: border-box;" value="34">34</option> 
 
     <option style="box-sizing: border-box;" value="35">35</option> 
 
     <option style="box-sizing: border-box;" value="36">36</option> 
 
     <option style="box-sizing: border-box;" value="37">37</option> 
 
     <option style="box-sizing: border-box;" value="38">38</option> 
 
     <option style="box-sizing: border-box;" value="39">39</option> 
 
     <option style="box-sizing: border-box;" value="40">40</option> 
 
    </select><br /> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-06-17 Marrior

あなたはjQueryのセレクタの両方select要素を選択しています。代わりに、<select>にid="pick_size"を付けてください。その後、あなたのjQueryで$("select")から$("#pick_size")に変更するとうまくいくはずです。

ここにはworking fiddleがあります。

出典

2016-06-17 19:24:59 pmahomme

スタックオーバーフローを助けてくれることを嬉しく思います。この回答があなたの問題を解決した場合は、それを合格とマークしてください。 – pmahomme

一度選択された非表示のドロップダウンオプションボックスは消えます

答えて

関連する問題