Nome diferentes ao select

[Wagner Martins - SC 0]

Olá,

 

Tenho esse código que adiciona selects do formulário de acordo com o numero que vc escolher, como eu poderia dar nomes diferentes aos selects, tipo idade1, idade2, idade3...

 

<script type="text/javascript">
var $chidrenQnt = jQuery('#Criancas_hotel'),
	$children = jQuery('#children');



var Children = {};
Children.container = $children;
Children.add = function(i) {
	while (i--) {
	Children.container.append('<label>idade: <select name="idade" ><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></select></label><br />');
	}
}
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>

 

[William Bruno 1501]

Eu já te disse no outro tópico que "dar nomes diferentes" ao select, é errado. Mas enfim.

<script type="text/javascript">
var $chidrenQnt = jQuery('#Criancas_hotel'),
    $children = jQuery('#children'),
    j = 0;

var Children = {};
Children.container = $children;
Children.add = function(i) {
    while (i--) {
        Children.container.append('<label>idade: <select name="idade' + j + '" ><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></select></label><br />');

        j++;
    }
}
//..
</script>

veja que tudo o que fiz, foi criar mais uma variavel chamada j de escopo global.

[Wagner Martins - SC 0]

Olá pessoal,

 

Esta dando esse erro no código jquery

 

Uncaught Typerror: Cannot call method 'html' of undefined.

 

Esse é meu código:

 

 

$(document).ready(function(){


    var counter = 1;


    $("#addButton").click(function () {


if(counter>3){
            alert("É permitido somente ateh 3 crianças");
            return false;
}   


var newTextBoxDiv = $(document.createElement('div'))
    .attr("id", 'TextBoxDiv' + counter);


newTextBoxDiv.after().html('<label>Idade '+ counter + '</label><br /><select style="background-color:#D1D1D1; color:#3C3C3C; border:0px;" name="idade' + counter +'" id="textbox' + counter + '" ><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></select>');


newTextBoxDiv.appendTo("#TextBoxesGroup");




counter++;
     });


     $("#removeButton").click(function () {
if(counter==1){
          alert("No more textbox to removde");
          return false;
       }   


counter--;


        $("#TextBoxDiv" + counter).remove();


     });


     $("#getButtonValue").click(function () {


var msg = '';
for(i=1; i<counter; i++){
     msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
     alert(msg);
     });
  });

 

esta dando erro aqui

 

newTextBoxDiv.after().html('<label>Idade '+ counter + '</label><br /><select style="background-color:#D1D1D1; color:#3C3C3C; border:0px;" name="idade' + counter +'" id="textbox' + counter + '" ><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></select>');

Mais não estou conseguindo arrumar, poderiam me ajudar?