Jquery +選擇+隱藏Div基於選定的索引值

Question

我是一箇中間設計師/開發者卡在一個簡單的問題，我無法弄清楚。

也許這只是我現在工作了近8個小時，但如果有人能幫助我，我會非常感激。

總之，我有3個下拉列表：

1. 沒有孩子的。
2. 嬰兒座椅。
3. 加高座位。

現在默認情況下，只有第一個下拉菜單顯示（沒有孩子）。其他兩個在CSS中默認隱藏。我在這裏要做的是，如果（沒有兒童）下拉列表的值不爲零，則顯示由jquery封裝在DIV中的其他兩個下拉列表。

這是迄今爲止我的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

你必須選擇一個簡單的拼寫錯誤的$('#baby') ...缺少結束引號

代碼的工作，否則，不知道這是影響你想

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

Answer 3

目前的工作爲你的小提琴。

http://jsfiddle.net/G7wdT/1

將是很好的封裝整個選擇在一個共同的事業部。

您需要在當前JS的Else語句中顯示div值，當值不爲0時。

下面是代碼：

<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 
}); 

按原樣運行您的代碼將不會初始化更改事件