JQuery - input dinamicos en funcion de valor select

 
Vista:
Imágen de perfil de raul

input dinamicos en funcion de valor select

Publicado por raul (2 intervenciones) el 23/10/2016 23:18:47
Hola,

Estoy intentando sin éxito desde hace unos días hacer un programilla jquery /javascript que haga lo siguiente:

Tengo un select como este:

1
2
3
4
5
6
7
8
9
10
<div>
       <label for="plazas">Número de Plazas</label>
	  <select  id="plazas" name="plazas" required/>
		<option value="">¿Cuántas plazas?</option>
		<option value="1">1 = ()</option>
		<option value="2">2 = (+ 1 acompañante)</option>
		<option value="3">3 = (+ 2 acompañantes)</option>
		<option value="4">4 = (+ 3 acompañantes)</option>
	 </select>
</div>

Y a continuacion, deseo que me escriba tantos input , como sea el valor del select elegido, por ejemplo si el usuario
elige la opcion 3 quiero que me escriba 3 input así:

1
2
3
4
<label for="nombre">Nombre</label>
<input type="text" name="nombre1" placeholder="nombre acompañante 1" required/>
<input type="text" name="nombre2" placeholder="nombre acompañante 2" required/>
<input type="text" name="nombre3" placeholder="nombre acompañante 3" required/>


¿Alguna ayuda o sugerencia?
Muchas gracias

Alraúl
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de kip
Val: 141
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

input dinamicos en funcion de valor select

Publicado por kip (38 intervenciones) el 24/10/2016 00:59:00
Hola, aqui te dejo un pequeño codigo basado en lo que pides:

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
<label for="plazas">Número de Plazas</label>
<select id="plazas" name="plazas" required>
<option value="">¿Cuántas plazas?</option>
<option value="1">1 = ()</option>
<option value="2">2 = (+ 1 acompañante)</option>
<option value="3">3 = (+ 2 acompañantes)</option>
<option value="4">4 = (+ 3 acompañantes)</option>
</select>
</div>
 
<div id='resultado'>
</div>

jQuery
1
2
3
4
5
6
7
8
9
10
11
$('select[name="plazas"]').click( function(event){
	var html = '';
	for (var i = 1; i <= $(this).val(); i++) {
  	html += createSelect(i);
  }
  $('div#resultado').html(html);
});
 
var createSelect = function(num) {
	return '<label for="nombre'+num+'">Nombre </label><input type="text" name="nombre'+num+'" placeholder="nombre acompañante '+num+'" required><br>';
};

Online
https://jsfiddle.net/gg7bvy2x/

Espero te ayude.

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de raul

input dinamicos en funcion de valor select

Publicado por raul (2 intervenciones) el 24/10/2016 08:29:36
Muchísimas Gracias Kip:

Es justo lo que necesitaba. :-)

Feliz día
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar