Slide elements with .slide()

user_14795118 0
Viewed 46

I created a <select> from 1 to 5 and based on the number I select I would like to show another <select>.

For example I have the select field children from 1 to 5 and select 5 with the age of each single child. If you select 3 children I want 3 fields to appear to select the individual age of each child.

I created the following code but it doesn't work. Can you help me understand what I did wrong. Thanks

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

jquery javascript
2 Answers

You need to hook your code to the change event of the select so that it runs when an option is chosen:

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

Taking this a step further you can improve the code by creating a loop which iterates N times for the selected number of children and clones the 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>

user_5194130

Try This:

$('#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>

user_144251240
Related