Tengo el siguiente código, el cual muestra u oculta elementos de un html dependiendo del valor que se seleccione
HTML:
<div>
<h3>Select Apples</h3>
<div>
<select id="apples" onchange="applenum()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
JS:
function applenum() {
let apples = $("apples").val();
if (apples == "0") {
$('#apple1').hide();
$('#apple2').hide();
$('#apple3').hide();
$('#apple4').hide();
$('#apple5').hide();
} else if (apples == "1") {
$('#apple1').show();
$('#apple2').hide();
$('#apple3').hide();
$('#apple4').hide();
$('#apple5').hide();
} else if (apples == "2") {
$('#apple1').show();
$('#apple2').show();
$('#apple3').hide();
$('#apple4').hide();
$('#apple5').hide();
}
}
¿Cómo puedo reducir el código con un bucle? ya que el número se incrementaría considerablemente dependiendo de la selección