Como mostrar una cantidad de textbox según seleccion

[clessx]

Hola

Quisiera saber si me pueden ayudar con una función que logre lo siguiente.

Necesito mostrar entre 1 a 10 Textbox seleccionando en un Select que valor entre 1 a 10.

Solo quiero que el usuario vea el valor seleccionado, es decir si quiere 3 textbox, que solo le aparescan esos 3 y no los 10 creados.

¿Como podria lograr esto con javascript, jquery o ajax?

De ante mano muchas gracias

[ioniben]

Si el usuario quiere 3 texboxes los creas con JavaScript

[Alexis88]

Para crear elementos de manera dinámica, tienes que usar el método createElement, pero como deseas ir variando la cantidad de elementos a crear, vas borrando los que hayan con el método removeChild.

Un pequeño ejemplo:

Código HTML:

<select id = "combo">
    <option value = 0>ELIJE UN VALOR</option>
    <option value = 1>UNO</option>
    <option value = 2>DOS</option>
    <option value = 3>TRES</option>
    <option value = 4>CUATRO</option>
    <option value = 5>CINCO</option>
    <option value = 6>SEIS</option>
    <option value = 7>SIETE</option>
    <option value = 8>OCHO</option>
    <option value = 9>NUEVE</option>
    <option value = 10>DIEZ</option>
</select>
<section id = "almacen"></section>
 

Código Javascript:

var combo = document.getElementById("combo"),
    almacen = document.getElementById("almacen");
 
combo.addEventListener("change", function(){
  var valor = this.value,
      cajas = almacen.getElementsByTagName("input"),
      totalCajas = cajas.length;
 
  if (almacen.hasChildNodes)
    while (almacen.childNodes.length)
      almacen.removeChild(almacen.firstChild);
  
  for (i = 0; i < valor; i++){
    var caja = document.createElement("input");
    caja.type = "text";
    caja.style.display = "block";
    almacen.appendChild(caja);
  }
}, false);
 

Al combo del documento, le asigno el evento change, para que cuando se elija una opción, se realice un conjunto de instrucciones, aglomeradas en una función. En dicha función, tomo el valor seleccionado en el combo, la cantidad de cajas que existan en la sección almacen y el total de cajas existentes. Con el método hasChildNodes, verifico que la sección almacen contenga elementos, de ser así, me apoyo en un bucle para ir eliminándolos uno a uno. Los elementos se eliminan desde el primero hasta el último, por lo que en cada iteración, iré eliminando siempre el primer elemento ya que al eliminar uno, el segundo pasará a ser el primero y así sucesivamente. Para tomar al primer elemento, utilizo el método firstChild. Esta acción se repetirá mientras la cantidad de elementos contenidos en la sección sea mayor a cero.

Luego, con ayuda de otro bucle, voy creando la cantidad de cajas especificadas por el usuario al elegir una de las opciones del combo y las voy adhiriendo una a una a la sección almacen con ayuda del método appendChild.

Así es como quedaría: http://jsbin.com/aPatiDOS/1

Saludos

[PHPeros]

Sólo un pequeño error:

if (almacen.hasChildNodes)

Esta sentencia será siempre cierta hasta dar error, porque lo que estás comprobando no es que tenga hijos nodos, sino que esa función (hasChildNodes) exista en el elemento "almacén". Por lo tanto usa paréntesis y devolverá el valor true/false que es lo que buscamos.

[Alexis88]

Se me pasó ese detalle.

Corrigiendo:

Código Javascript:

var combo = document.getElementById("combo"),
    almacen = document.getElementById("almacen");
 
combo.addEventListener("change", function(){
  var valor = this.value,
      cajas = almacen.getElementsByTagName("input"),
      totalCajas = cajas.length;
 
  if (almacen.hasChildNodes())
    while (almacen.childNodes.length)
      almacen.removeChild(almacen.firstChild);
  
  for (i = 0; i < valor; i++){
    var caja = document.createElement("input");
    caja.type = "text";
    caja.style.display = "block";
    almacen.appendChild(caja);
  }
}, false);
 

Gracias por la observación.