Question

我是一名中间设计师/开发人员，他遇到了一个我无法弄清楚的简单问题。

也许这只是我现在工作了近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>

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

目前正在为你做一个小提琴。

http://jsfiddle.net/G7wdT/1

将整个选择封装在一个普通的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>

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

您隐藏的#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 3

$('#baby')选择器中有一个简单的拼写错误...缺少结束语

代码工作正常，但不确定它是否是您想要的效果

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

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

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

Jquery + Select + Hide Div基于Selected索引值

5 个答案: