使用.slide()滑动元素

Question

我创建了一个从1到5的<select>，根据我选择的数字，我想显示另一个<select>。

例如，我有一个从1到5的选择字段child，并根据每个孩子的年龄选择5。如果您选择3个孩子，我希望出现3个字段来选择每个孩子的单独年龄。

我创建了以下代码，但它不能工作。你能帮我弄明白我做错了什么吗？谢谢

​

$(document).ready(function() {
  var valore = $('#bimbi').val();
  
  if (valore == 1) {
    $("#etbimbo1").slideDown();
  }
  if (valore == 2) {
    $("#etbimbo1").slideDown();
    $("#etbimbo2").slideDown();
  }
  if (valore == 3) {
    $("#etbimbo1").slideDown();
    $("#etbimbo2").slideDown();
    $("#etbimbo3").slideDown();
  }
  if (valore == 4) {
    $("#etbimbo1").slideDown();
    $("#etbimbo2").slideDown();
    $("#etbimbo3").slideDown();
    $("#etbimbo4").slideDown();
  }
});

#etbimbo1,
#etbimbo2,
#etbimbo3,
#etbimbo4 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="flip">
  <select name="bambini" id="bimbi">
    <option value="1" id="bmb1">1</option>
    <option value="2" id="bmb2">2</option>
    <option value="3" id="bmb3">3</option>
    <option value="4" id="bmb4">4</option>
  </select>
</div>
<select name="bambini" id="etbimbo1" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(1)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo2" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(2)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo3" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(3)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo4" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni()</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>

​

Answer 1

您需要将代码连接到select的change事件，以便它在选择某个选项时运行：

​

$(document).ready(function() {
  $('#bimbi').on('change', e => {
    var valore = parseInt($(e.target).val(), 10) || 0;

    if (valore == 1) {
      $("#etbimbo1").slideDown();
    }
    if (valore == 2) {
      $("#etbimbo1").slideDown();
      $("#etbimbo2").slideDown();
    }
    if (valore == 3) {
      $("#etbimbo1").slideDown();
      $("#etbimbo2").slideDown();
      $("#etbimbo3").slideDown();
    }
    if (valore == 4) {
      $("#etbimbo1").slideDown();
      $("#etbimbo2").slideDown();
      $("#etbimbo3").slideDown();
      $("#etbimbo4").slideDown();
    }
  });
});

#etbimbo1,
#etbimbo2,
#etbimbo3,
#etbimbo4 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="flip">
  <select name="bambini" id="bimbi">
    <option value="1" id="bmb1">1</option>
    <option value="2" id="bmb2">2</option>
    <option value="3" id="bmb3">3</option>
    <option value="4" id="bmb4">4</option>
  </select>
</div>
<select name="bambini" id="etbimbo1" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(1)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo2" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(2)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo3" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(3)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo4" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni()</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>

​

更进一步，您可以通过创建一个循环来改进代码，该循环对选定数量的子代迭代N次，并克隆select：

​

$(document).ready(function() {
  $('#bimbi').on('change', e => {
    var valore = parseInt($(e.target).val(), 10) || 0;
    $('select.bm:visible').remove();
    
    for (var i = 0; i < valore; i++) {
      $('.bm-template').clone().removeClass('bm-template').insertAfter(e.target);
    }
  });
});

.bm-template {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="flip">
  <select name="bambini" id="bimbi">
    <option value="1" id="bmb1">1</option>
    <option value="2" id="bmb2">2</option>
    <option value="3" id="bmb3">3</option>
    <option value="4" id="bmb4">4</option>
  </select>
</div>

<select name="bambini" class="bm bm-template">
  <option value="bimbo1">0-5 anni(1)</option>
  <option value="bimbo2">6-12 anni</option>
</select>

​

Answer 2

试试这个：

​

$('#bimbi').change(function() {
  var valore = $('#bimbi').val();
  
  if (valore == 1) {
    $("#etbimbo2").slideUp();
    $("#etbimbo3").slideUp();
    $("#etbimbo4").slideUp();
    $("#etbimbo1").slideDown();
  }
  if (valore == 2) {
    $("#etbimbo3").slideUp();
    $("#etbimbo4").slideUp();
    $("#etbimbo1").slideDown();
    $("#etbimbo2").slideDown();
  }
  if (valore == 3) {
    $("#etbimbo4").slideUp();
    $("#etbimbo1").slideDown();
    $("#etbimbo2").slideDown();
    $("#etbimbo3").slideDown();
  }
  if (valore == 4) {
    $("#etbimbo1").slideDown();
    $("#etbimbo2").slideDown();
    $("#etbimbo3").slideDown();
    $("#etbimbo4").slideDown();
  }
});

#etbimbo1,
#etbimbo2,
#etbimbo3,
#etbimbo4 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="flip">
  <select name="bambini" id="bimbi">
    <option value="1" id="bmb1">1</option>
    <option value="2" id="bmb2">2</option>
    <option value="3" id="bmb3">3</option>
    <option value="4" id="bmb4">4</option>
  </select>
</div>
<select name="bambini" id="etbimbo1" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(1)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo2" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(2)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo3" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(3)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo4" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni()</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>

​