0

tengo un problema con lo siguiente. Resulta que quiero crear elementos input dependientes de una cantidad seleccionada en un select-option. Por ejemplo si se selecciona un valor del select como 3, crear esos 3 input y asi sucesivamente. hasta ahora tengo lo siguiente: Una función que obtiene los valores y una variable con los input que debo de poner

function showInput() {
    getSelectElement = document.getElementById("vias").value;
    if (getSelectElement == 0) {
        alert("Seleccione un numero válido");
    }else{

        construirInput = 1;
        while( construirInput <= getSelectElement){
            colocar = "<div class='col-md-4 col-sm-4 col-xs-10 '><label class='form-check-label'>Calle</label><input class='form-control' type='text' placeholder='Ingresar Calle' name='calle'></div><div class='col-md-3 col-sm-3 col-xs-10 '><label class='form-check-label'>Por calle</label><input class='form-control' type='text' placeholder='Por Calle' name='cruceA[]'></div><div class='col-md-3 col-sm-3 col-xs-10 '><label class='form-check-label'>Y</label><input class='form-control' type='text' placeholder='Y' name='cruceB[]'></div>";

            $('#ubicacion').html(colocar);
            construirInput++;
        }

    }
}

mientras que los select están enumerados del uno al 10 como:

<select name="vias" id="vias" class="form-control" onchange="showInput()">
    <option value="0">Selecciona</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>

para colocarlo solo un div con un ID = "ubicacion". Pueden ayudarme con esto...

2
  • No entiendo muy bien tu pregunta. ¿Deseas crear 3 elementos tipo input o deseas crear tantos elementos input como se seleccionen de la lista?. ¿Podrías aclarar un poco eso? Saludos Commented el 9 nov. 2019 a las 17:25
  • se podía ver como crear tantos elementos input dependiendo de un valor seleccionado en un select Commented el 9 nov. 2019 a las 17:35

1 respuesta 1

2

Sólo le hice unas pequeñas modificaciones:

  1. Agregué el elemento div con id="ubicacion".
  2. En el evento onchange del elemento select, envío this como parámetro, para que esté disponible en la función showInput() y así obtener el valor del select.
  3. Y cambié el bucle while por un bucle for (me gustan más jeje).

El código quedaría algo así:

function showInput(select) {
    var str = '';
    if (select.value == 0) {
        alert("Seleccione un numero válido");
    }else{
    	/*Ciclo para que se ejecute el numero de veces*/
    	for (var i = 0; i < select.value; i++) 
			str+='<input type="text" ><br>';
		$('#ubicacion').html(str);

    }
}
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<select name="vias" id="vias" class="form-control" onchange="showInput(this)">
    <option value="0">Selecciona</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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<div id="ubicacion">
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.