jQueryによって隠されて表示される一連のドロップダウンメニュー

Question

jQueryとWeb開発のn00bです。ユーザーがオプションを選択すると一連のドロップダウンメニューを作成しようとしています最後のテーブルが現れるように、次のドロップダウンメニューを表示させる。ここで

はHTMLです：

<div class="dropdownMenus"> 
          <form id="menu1"> 
           <h2>Choose your number</h2> 
           <select> 
            <option class="descriptive" value="descriptive">Please choose your area</option> 
            <option class="menuoption1" value="01493">01493 - Great Yarmouth</option> 
            <option class="menuoption1" value="01603">01603 - Norwich</option> 
            <option class="menuoption1" value="01393">01393 - Kings Lynn</option> 
            <option class="menuoption1" value="01763">01763 - Lowestoft</option> 
           </select> 
          </form> 
         </div> 

         <div class="dropdownMenus"> 
          <form id="menu2"> 
           <h2>Number Type</h2> 
           <select> 
            <option class="descriptive" value="descriptive">Please choose your number</option> 
            <option class="menuoption2" value="gold">Gold</option> 
            <option class="menuoption2" value="silver">Silver</option> 
            <option class="menuoption2" value="bronze">Bronze</option> 
           </select> 
          </form> 
         </div> 

         <div class="dropdownMenus"> 
          <form id="menu3"> 
           <h2>Order</h2> 
            <form> 
             <input id="menuoption3" type="checkbox" value="sequential"> Sequential<br> 
             <input id="menuoption4" type="checkbox" value="random"> Random<br> 
             <input id="menuoption5" type="checkbox" value="voice"> Voice<br> 
             <input id="menuoption6" type="checkbox" value="email"> Email<br> 
            </form> 

          </form> 
         </div> 

         <table id="resultsTable"> 
          <thead> 
           <tr> 
            <th>Area</th> 
            <th>Number Type</th> 
            <th>Select</th> 
            <th>Voice</th> 
            <th>Mail</th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr> 
            <td>Placeholder Data</td> 
            <td>Placeholder Data</td> 
            <td> 
             <input type="checkbox" id="select" /> 
            </td> 
            <td> 
             <input type="checkbox" id="voice" /> 
            </td> 
            <td> 
             <input type="checkbox" id="mail" /> 
            </td> 
           </tr> 
          </tbody> 
         </table> 

そして、ここでは私のjQueryのです：

ここ

$(document).ready(function(){ 

var $packages = $("#menu2"); 
var $orders = $("#menu3"); 
var $resultsTable = $("#resultsTable"); 





$packages.hide(); 
$orders.hide(); 
$resultsTable.hide(); 

$(".menuoption1").click(function(){ 
    $packages.show(); 
}); 

$(".menuoption2").click(function(){ 
    $orders.show(); 
}); 

$("#menuoption3, #menuoption4, #menuoption5").click(function(){ 
    $resultsTable.show(); 
}); 
}); 

私がこれまでにやっていることへのリンクです： https://jsfiddle.net/monkeyroboninja/9f9sotfv/

あなたが見ればFirefoxやIEのリンクでは動作するはずですが、Chromeで見ると完全には動作しません。要素の最初の隠蔽は機能しますが、発火イベントのclick（）では明らかになりません。

Answer 1

代わりの

$(".menuoption1").click(function(){... 

が

$("#menu1").change(function(){... 

ドロップダウンの値が変更されたときにこれはすべてのブラウザや火災で動作するはずですしてみてください:-)すべてのヘルプははるかに高く評価されるだろう。

理由.click doesntの仕事（@Archerのおかげで）：

オプション要素は何もクリックイベントを持っていないからです。

select要素のchangeイベントハンドラも有効でした。