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

按原样运行您的代码将不会初始化更改事件