¿Cómo mostrar y ocultar varios select al seleccionar el valor?

publicado por: Anonymous

introducir la descripción de la imagen aquí Cómo puedo mostra y ocultar select con jQuery
por ejemplo tengo un select con valor 1 a 4
ahora al elegir 2 me tiene que mostrar 2 select otro ejemplo
si eligo 3 me tiene que mostar 3 select asi tambien al elegir 4
me tiene que mostrar 4 select gracias antemano

Aquí les dejo mi código que aún solo tengo para 2
mi problema está al elegir 2 me muestra solo 1 select pero yo quiero que me muestre

SELECT

Habitacion

1
2
3
4

ADT

2
3
4

CHD

2
3
4
5

CODIGO de JS

    $(function() {
        $('#Habitacion').change(function(){
            $('.colors').hide();
           $('#' + $(this).val()).show();  
        });
    });

Como esto me debe salir al final introducir la descripción de la imagen aquí

solución

Por lo que interpreto de tu pregunta seria algo así lo que deberías implementar, te dejo un código simple para que puedas probarlo y a partir de el lo adaptes a la necesidad de tu requerimiento:

_x000D_

_x000D_

$(function(){_x000D_
_x000D_
  $("#mySelect").change(function(){_x000D_
  var cantidad =$("#mySelect").val();_x000D_
    $("#myInput").val(cantidad);_x000D_
    RenderInputs(cantidad);_x000D_
  });_x000D_
  _x000D_
  $("#myInput").change(function(){_x000D_
  var cantidad = $("#myInput").val();_x000D_
    $("#mySelect").val(cantidad);_x000D_
    RenderInputs(cantidad);_x000D_
  });_x000D_
_x000D_
});_x000D_
_x000D_
function RenderInputs(cantidad){_x000D_
$('#content').html('');_x000D_
  for (var i = 0; i < cantidad; i++) {_x000D_
  $('#content').append('<div class="col-6">');_x000D_
        $('#content').append('<label> Input ' + (i+1) + '</label>');_x000D_
        $('#content').append('<input class="form-control" type="text" id="input'+(i+1)+'"/>');_x000D_
        $('#content').append('</div>');_x000D_
  }_x000D_
_x000D_
}

_x000D_

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>_x000D_
_x000D_
_x000D_
<div class="row">_x000D_
    <div class="col-6">_x000D_
      <lavel>Cantidad</label>_x000D_
      <select id="mySelect" class="form-control">_x000D_
                <option value="0">0</option>_x000D_
                <option value="1">1</option>_x000D_
                <option value="2">2</option>_x000D_
                <option value="3">3</option>_x000D_
                <option value="4">4</option>_x000D_
      </select>_x000D_
    </div>_x000D_
    <div class="col-6">_x000D_
        <label>Cantidad</label>_x000D_
        <input id="myInput" class="form-control" type="number">_x000D_
    </div>_x000D_
_x000D_
</div>_x000D_
_x000D_
<div class="row" id="content"></div>

_x000D_

_x000D_

_x000D_

Espero que te oriente! Saludos.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *