Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Wagner Martins - SC

Add option select for age

Por , em Javascript

Recommended Posts

Wagner Martins - SC    0

Wagner Martins - SC
Postado

Bom dia pessoas,

 

 

Tenho esse código Jquery para acrescenatar um optpion select de acordo com a quantidade que vc escolheu:

 

$(function(){
$('#Criancas_hotel').change( function(){
createSelectIdade($(this).val());
});
});

function createSelectIdade(qtd){
$('#message_display').html('');
while (parseInt(qtd)){
var select = $('<select name="selectIdade' + qtd-- + '" />');
var option = '';			
for (var i = 0; i <= 100; i++){
option += '<option value="' + i + '">' + i + '</option>';
}
select.append(option);
$('#message_display').append('Idade').append(select).append('');
}
}

Quando eu escolho o numero "2" ele acrescenta dois options corretamente, e então coloco as idades, no caso de eu querer apenas selecionar uma idade, e seleciono o numero "1" as idades q eu escolhi ficam "0" novamente, como eu faço para ele retirar sempre o ultimo option, deixando os outros como estão?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

vc não pode limpar com:

$('#message_display').html('');

e sim, ir removendo os filhos ou adicionando.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

vc já tá usando o .append() para adicionar.

agora use o .remove() para remover, mas remova apenas os necessários, e não todos eles.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wagner Martins - SC    0

Wagner Martins - SC
Postado

Estou fazendo assim:

 

 

$(function(){
$('#Criancas_hotel').change( function(){
createSelectIdade($(this).val());
});
});
function createSelectIdade(qtd){
$('#message_display').html('');
while (parseInt(qtd)){
var select = $('<select name="selectIdade' + qtd-- + '" />');
var option = '';
for (var i = 0; i <= 100; i++){
option += '<option value="' + i + '">' + i + '</option>';
}
select.append(option);
$('#message_display').append('Idade').append(select).append('');
}
}
select.remove(option);
$('#message_display').remove('Idade').remove(select).remove('');

 

Usei o remove() como você falou, mais naum chegou ao resultado ainda esta como antes



Como eu poderia fazer para remover apenas os necessários?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

dá uma olhada:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
label { display: block; }
</style>
</head>
<body>

<select name="children-qnt" id="children-qnt">
	<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>
	<option value="6">6</option>
</select>
<fieldset id="children">

</fieldset><!-- #children -->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var $chidrenQnt = jQuery('#children-qnt'),
	$children = jQuery('#children');



var Children = {};
Children.container = $children;
Children.add = function(i) {
	while (i--) {
		Children.container.append('<label>idade: <input type="text" name="" /></label>');
	}
}
Children.remove = function(i) {
	while (i--) {
		Children.container.find('label:last').remove();
	}
}


$chidrenQnt.on('change', function(){
	var $this = jQuery(this),
		i = $this.val(),
		qnt = $children.find('label').length;


	if (qnt > i) {
		Children.remove(qnt - i);
	}
	if (qnt < i) {
		Children.add(i - qnt);
	}
});


</script>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wagner Martins - SC    0

Wagner Martins - SC
Postado

Cara me ajudou bastante esse código eu consegui fazer o que eu queria sim, mais agora eu quero colocar um valor para o name do select, como posso fazer isso?

Eu usei a variavel "i" mais ele naum conta corretamente, gostaria q ficasse select1 select2 select3...

 

 

var $chidrenQnt = jQuery('#children-qnt'),
$children = jQuery('#children');
var Children = {};
Children.container = $children;
Children.add = function(i) {
while (i--) {
Children.container.append('<label>idade: <select id"selectidade' + i + '"><option name="1">1</option><option name="2">2</option><option name="3">3</option><option name="4">4</option><option name="5">5</option><option name="6">6</option></select></label>');
}
}
Children.remove = function(i) {
while (i--) {
Children.container.find('label:last').remove();
}
}




$chidrenQnt.on('change', function(){
var $this = jQuery(this),
i = $this.val(),
qnt = $children.find('label').length;




if (qnt > i) {
Children.remove(qnt - i);
}
if (qnt < i) {
Children.add(i - qnt);
}
});

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

isso ai é um erro cara.

 

trabalhe com arrays.

Children.container.append('<label>idade: <input type="text" name="idade[]" /></label>');

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wagner Martins - SC    0

Wagner Martins - SC
Postado

Seria assim?

 

<script type="text/javascript">
var $chidrenQnt = jQuery('#children-qnt'),
	$children = jQuery('#children');
var Children = {};
Children.container = $children;
Children.add = function(i) {
	while (i--) {
var idade = new Array();

		Children.container.append('<label>idade: <select name="'idade[]'"><option name="1">1</option><option name="2">2</option><option name="3">3</option><option name="4">4</option><option name="5">5</option><option name="6">6</option></select></label>');
	}
}
Children.remove = function(i) {
	while (i--) {
		Children.container.find('label:last').remove();
	}
}


$chidrenQnt.on('change', function(){
	var $this = jQuery(this),
		i = $this.val(),
		qnt = $children.find('label').length;


	if (qnt > i) {
		Children.remove(qnt - i);
	}
	if (qnt < i) {
		Children.add(i - qnt);
	}
});


</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 
Children.container.append('<label>idade: <select name="idade[]"><option name="1">1</option><option name="2">2</option><option name="3">3</option><option name="4">4</option><option name="5">5</option><option name="6">6</option></select></label>');

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wagner Martins - SC    0

Wagner Martins - SC
Postado

mudei ali como vc falou, no código-fonte ficou assim

 

 

<select name="idade[]"><option name="1">1</option><option name="2">2</option><option name="3">3</option><option name="4">4</option><option name="5">5</option><option name="6">6</option></select>

Não teria que colocar algum i++ no javascript para ir somando, pois eu queria que aparecesse assim no código-fonte:



 


<select name="idade1"><option name="1">1</option><option name="2">2</option><option name="3">3</option><option name="4">4</option><option name="5">5</option><option name="6">6</option></select>



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			
Isso ai é gambiarra, por isso te sugeri trabalhar com array.


			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Wagner Martins - SC
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Wagner Martins - SC
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Será q existe outra forma?


 


 


Por favor, olhe como eu fiz


 


 


 




 


var Children = {};
Children.container = $children;
Children.add = function(i) {
while (i--) {
Children.container.append('<label>idade: <input type="text" name="'+ i++'" /></label>');
}
}
Children.remove = function(i) {
while (i--) {
Children.container.find('label:last').remove();
}
}


coloquei o i++ mais naum deu certom teria q achar um jeito de somar a variael ir, de acordo com o que vai aparecendo, mais como neh brother?





Estou fazendo com for, mais naum esta dando certo, poderiam me aajudar?


 


for (var i = 0; i <= 4; i++){
while (i--) {
var idade = new Array();
idade.length;
Children.container.append('idade: <select name="'+ i +'"><option name="1">1</option><option name="2">2</option><option name="3">3</option><option name="4">4</option><option name="5">5</option><option name="6">6</option></select></label>');
}
}
}




			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
vitorscar
			  

	
		
	
			 0
	
		
	

		

		

			


	
		vitorscar
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Estou tentando adaptar esse font mais não estou conseguindo.


 


Estou querendo o seguinte:


 


Tenho dois tipo de busca, um possui o campo "data" e "periodo", o outro possui "numero".


 


criei um select com o "tipo de Busca" com esses dois itens, dependendo do que o usuário escolher, aparece o <input> pra realizar determinada busca.


 


Se escolhe "data", aparece um campo para digitar "data" e um de "periodo"


Se escolhe "numero", aparece um campo para digitar "numero"


 


Não sei se fui claro.


 


Obrigado.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Javascript
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito