Jquery + Select + Hide選択したインデックス値に基づいて

Question

私は理解できない単純な問題に悩まされている中間デザイナー/開発者です。

多分私はちょうど今直近8時間働いていますが、誰でも助けてくれればとっても分かります。

1. 子供のいない：要するに
   は、私が3つのドロップダウンを持っています。
2. ベビーシート。
3. ブースターシート。

デフォルトでは、最初のドロップダウンのみが表示されます（子はありません）。他の2つはデフォルトでCSSに隠されています。私がここでやろうとしているのは、（子供がいない）ドロップダウンがゼロでない場合、jqueryでDIVにカプセル化された他の2つのドロップダウンを表示することです。

これは、これまで私のXHTMLコード、エラーなしですが、何も起こりません、次のいずれか

<div class="title">No of Children:</div> 
    <div class="info"> 
     <select name="children" id="no_of_children"> 
     <option value="0" selected>0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     </select> 
    </div> 

    <div class="title" id="baby">Baby Seats?:</div> 
    <div class="info"> 
     <select name="babyseats" id="baby_seats"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     </select> 
    </div> 

    <div class="title" id="booster">Booster seats?:</div> 
    <div class="info"> 
     <select name="boosterseats" id="booster_seats"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     </select> 
    </div> 

これは私のjQueryのです：

<script type="text/javascript"> 
     $('#no_of_children').bind('change', function(event) { 

     var x = $('#no_of_children').val();   
if(x == "0") {    
    $('#booster').hide(); 
    $('#baby').hide();  
}   
     }); 
    </script> 

何も起こりません。助けてください。

Answer 1

隠している#boosterと#babyの要素には、タイトルのみが含まれています。

あなたのHTMLを改訂してみてください。 JavaScriptはそのまま動作するはずです。

<div id="baby"> 
    <div class="title">Baby Seats?:</div> 
    <div class="info"> 
    <select name="babyseats" id="baby_seats"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    </div> 
</div> 

<div id="booster"> 
    <div class="title">Booster seats?:</div> 
    <div class="info"> 
    <select name="boosterseats" id="booster_seats"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    </div> 
</div> 

Answer 2

わからない、それはあなたが

現在作業

http://jsfiddle.net/YbKSk/1/

Answer 3

が欲しい効果ですが、あなたは、コードがそうでなければ動作します閉じ引用

を逃す... $('#baby')するためのセレクタでの単純なタイプミスを持っていますあなたのためのフィドル。

http://jsfiddle.net/G7wdT/1

は、共通の本部で全体の選択をカプセル化するとよいでしょう。

値が0でない場合、現在のJSのElseステートメントにdivを表示する必要があります。ここで

はコードです：

<div class="title">No of Children:</div> 
<div class="info"> 
    <select name="children" id="no_of_children"> 
    <option value="0" selected>0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </select> 
</div> 

<div class="title" id="baby">Baby Seats?: 
    <div class="info"> 
     <select name="babyseats" id="baby_seats"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     </select> 
    </div> 
</div> 

<div class="title" id="booster">Booster seats?: 
    <div class="info"> 
     <select name="boosterseats" id="booster_seats"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     </select> 
    </div> 
</div> 

とJS

$('#no_of_children').bind('change', function(event) { 

var x = $('#no_of_children').val(); 

if (x == "0") { 
    $('#booster').hide(); 
    $('#baby').hide(); 
}else{ 
    $('#booster').show(); 
    $('#baby').show(); 
} 

}）;

Answer 4

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#no_of_children').bind('change', function (event) { 

      var x = $('#no_of_children').val(); 
      if (x == "0") { 
       $('#booster').hide(); 
       $('#baby').hide(); 
      } else { 
       $('#booster').show(); 
       $('#baby').show(); 
      } 
     }); 
    }); 


<div class="title"> 
    No of Children:</div> 
<div class="info"> 
    <select name="children" id="no_of_children"> 
     <option value="0" selected>0</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
</div> 
<div class="title" id="baby" style="display: none;"> 
    Baby Seats?: 
    <div class="info"> 
     <select name="babyseats" id="baby_seats"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
     </select> 
    </div> 
</div> 
<div class="title" id="booster" style="display: none;"> 
    Booster seats?: 
    <div class="info"> 
     <select name="boosterseats" id="booster_seats"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
     </select> 
    </div> 
</div> 

</script> 

Answer 5

はあなたのjQueryを

$(function() { 

    //YOUR CODE HERE 
}); 

の内部に含まれていることを確認します

コードをそのまま実行しても変更イベントは初期化されません