Jquery+；选择+；基于选定的索引值隐藏Div

我是一名中级设计师/开发人员，在一个我无法解决的简单问题上陷入困境

也许只是我现在连续工作了将近8个小时，但如果有人能帮我，我将不胜感激

简而言之，我有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>

子项的数量：
0
1.
2.
3.
婴儿座椅？：
1.
2.
3.
加高座椅？：
1.
2.
3.

这是我的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>

$（“#无子项”）.bind（'change'，函数（事件）{
var x=$（'u子项的数量'）.val（）；
如果（x==“0”）{
$（'#booster'）.hide（）；
$（'宝贝'）.hide（）；
}         
});

什么也没发生。请帮忙

要隐藏的

#booster

和

#baby

元素只包含标题

试着像这样修改你的HTML。它们应该按原样工作

<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>

婴儿座椅？：
1.
2.
3.
加高座椅？：
1.
2.
3.

您隐藏的

#booster

和

#baby

元素仅包含标题

试着像这样修改你的HTML。它们应该按原样工作

<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>

婴儿座椅？：
1.
2.
3.
加高座椅？：
1.
2.
3.

您在选择器中有一个简单的输入错误，

$（“#baby”）

…缺少结束引号

代码在其他情况下工作，尽管不确定它是否是您想要的效果

---

您在选择器中有一个简单的输入错误，

$（“#baby”）

…缺少结束引号

代码在其他情况下工作，尽管不确定它是否是您想要的效果

---

目前正在为您制作小提琴

最好将整个select封装在一个公共Div中

当值不是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>

---

}))；​

目前正在为您制作小提琴

最好将整个select封装在一个公共Div中

当值不是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>

}))；​

$（文档）.ready（函数（）{
$（“#无子项”）.bind（'change'，函数（事件）{
var x=$（'u子项的数量'）.val（）；
如果（x=“0”）{
$（'#booster'）.hide（）；
$（'宝贝'）.hide（）；
}否则{
$（'#booster'）.show（）；
$（'宝贝'）.show（）；
}
});
});
儿童人数：
0
1.
2.
3.
婴儿座椅？：
1.
2.
3.
加高座椅？：
1.
2.
3.

$（文档）.ready（函数（）{
$（“#无子项”）.bind（'change'，函数（事件）{
var x=$（'u子项的数量'）.val（）；
如果（x=“0”）{
$（'#booster'）.hide（）；
$（'宝贝'）.hide（）；
}否则{
$（'#booster'）.show（）；
$（'宝贝'）.show（）；
}
});
});
儿童人数：
0
1.
2.
3.
婴儿座椅？：
1.
2.
3.
加高座椅？：
1.
2.
3.

确保jQuery包含在

$(function () {

    //YOUR CODE HERE
});

---

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

请确保jQuery包含在

$(function () {

    //YOUR CODE HERE
});

---

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

谢谢您的快速响应，该死的，你们太快了！！如果有人需要自由职业者的工作，我超载了。。我没做任何改变就让它工作了，唯一的问题是我的js放错地方了。。另外，我在这里编写的代码中把div元素放错了。。正如@zenbait在下面所说的，感谢你们的超快速反应，该死的，你们真是太快了！！如果有人需要自由职业者的工作，我超载了。。我没做任何改变就让它工作了，唯一的问题是我的js放错地方了。。另外，我在这里编写的代码中把div元素放错了。。正如@zenbait在下面所说的，谢谢你的快速反应，让它成为liek的魅力所在。只是长时间的工作会导致毫无结果的错误。：）非常感谢，谢谢你的快速反应，我很高兴能为你效劳。只是长时间的工作会导致毫无结果的错误。：）非常感谢您的深思熟虑，并从一开始就隐藏这两个选择，因为默认值选择了0。它现在正在工作，是的，我把它放在那里，只是放错了位置。：）干杯并从一开始就隐藏这两个选项，因为默认值选择了0。它现在正在工作，是的，我把它放在那里，只是放错了位置。：）干杯