Estou fazendo um formulário que ao clicar no botão Add, eu gero um novo formulário. Até aí tudo bem, mas toda vez que eu gero um novo, tenho dois selects, pra quando eu escolher algum índice do primeiro, carregue tais opções no segundo. O problema é quando eu gero o segundo formulário, quando eu clico em algo no select... altero o índice do select do primeiro formulário.
Alguém pode me ajudar?
<!DOCTYPE html>
<html>
<head>
<title>Página em Construção</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="teste.js" type="text/javascript"></script>
</head>
<body>
<button type="button" id="btnAddForm" onclick="CloneForm('myForm');">Add Cômodo</button>
<div id="formulario">
<form name="myForm">
Cômodo:
<select id="comodos" onchange="loadList(this.value)" >
<option value="x" selected></option>
<!--<option value="">Selecione o Cômodo</option>-->
<option value="garagem">Garagem</option>
<option value="areaExterna">Área Externa</option>
<option value="hall">Hall de Entrada</option>
<option value="sala">Sala</option>
<option value="cozinha">Cozinha</option>
<option value="areaServico">Área de Serviço</option>
<option value="escada">Escada/Corredor</option>
<option value="dormitorio">Dormitório</option>
<option value="banheiro">Banheiro</option>
<option value='10'>Outro</option>
</select>
<br/>
Serviço <select id="servicos" name="servicos">
</select>
</form>
</div>
</body>
</html>
Código JavaScript
function CloneForm(formName) {
var formCount = document.forms.length;
var oForm = document.forms[formName];
var clone = oForm.cloneNode(true);
clone.name += "_" + formCount;
document.body.appendChild(clone);
}
var x = new Array("Selecione um Serviço", "---");
var garagem = new Array("Demoliçao de Muro", "Construção de Muro", "Regularização de Contrapiso", "Pintura de Paredes", "Troca de portas / Portão", "Reparo em Telha - Troca de Telhas e Calhas", "Reparos de Infiltração: Raspagem e Impermeabilização");
var areaExterna = new Array("Demoliçao de Muro", "Construção de Muro", "Regularização de Contrapiso", "Pintura de Paredes", "Troca de portas / Portão", "Reparo em Telha - Troca de Telhas e Calhas", "Reparos de Infiltração: Raspagem e Impermeabilização");
var hall = new Array("Demolição de Paredes", "Contrução de Paredes", "Tratamento de Pisos de Madeira", "Instalação ou Troca de Piso Frio",
"Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores");
var sala = new Array("Demolição de Paredes", "Contrução de Paredes", "Tratamento de Pisos de Madeira", "Instalação ou Troca de Piso Frio",
"Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores",
"Reparos de Infiltração: Raspagem e Impermeabilização", "Preparação e Instalação de Ar Condicionados");
var cozinha = new Array("Demolição de Paredes", "Contrução de Paredes", "Instalação ou Troca de Piso Frio",
"Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores",
"Reparos de Infiltração: Raspagem e Impermeabilização", "Hidráulica: Troca de Tubulação ou Novos Pontos de Água", "Troca de Revestimentos de Parede (Azulejo, Pastilha, Cerâmica)");
var areaServico = new Array("Demolição de Paredes", "Contrução de Paredes", "Instalação ou Troca de Piso Frio",
"Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores",
"Reparos de Infiltração: Raspagem e Impermeabilização", "Hidráulica: Troca de Tubulação ou Novos Pontos de Água",
"Troca de Revestimentos de Parede (Azulejo, Pastilha, Cerâmica)", "Troca de Tanque e Torneiras");
var escada = new Array("Demolição de Paredes", "Contrução de Paredes",
"Instalação ou Troca de Piso Frio",
"Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas",
"Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores",
"Troca de Revestimentos de Parede (Azulejo, Pastilha, Cerâmica)");
var dormitorio = new Array("Demolição de Paredes", "Contrução de Paredes", "Tratamento de Pisos de Madeira",
"Instalação ou Troca de Piso Frio", "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas",
"Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores",
"Reparos de Infiltração: Raspagem e Impermeabilização", "Preparação e Instalação de Ar Condicionados");
var banheiro = new Array("Demolição de Paredes", "Construção de Paredes", "Troca de Revestimentos de Parede (Azulejos, Pastilha, Cerâmica)",
"Troca de Metais(Registros, Chuveiro)", "Execução de Nicho Embutido", "Adaptação de Válvula Hydra para Caixa Acoplada",
"Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e/ou Janelas", "Forro de Gesso e Iluminação",
"Hidráulica: Troca de Tubulação ou Novos Pontos de Água", "Elétrica: Tomada e Interruptores",
"Reparos de Infiltração: Raspagem e Impermeabilização");
function loadList(v) {
var objSpan1 = document.getElementById("estado");
var listaEscolhida = eval(v);
/*
if (listaEscolhida==x) {
objSpan1.style.display = "none";
}else{
objSpan1.style.display = "block";
}
*/
document.myForm.servicos.options.length = listaEscolhida.length;
for (i = 0; i < listaEscolhida.length; i++) {
document.myForm.servicos.options[i] = new Option(listaEscolhida[i], listaEscolhida[i]);
}
}
function resetLists() {
loadList("x");
document.myForm.comodos.options[0].selected = true;
}
window.onload = resetLists;