Ir para conteúdo
Fórum Script Brasil
  • 0

Preciso de ajuda em um formulário com varios combos dependentes

Alan Silva

Perguntado por Alan Silva,

 Share

Pergunta

Alan Silva

Alan Silva

Postado
Postado

Olá Pessoal!!!

Estou com uma grande dificuldade para criar um formulário com varios combos dependentes, já faz uma semana que estou procurando conteúdo na web

mais nem um dos conteudos sanou a minha dificuldade. Não sou bom ou seja muito fraco em javascript, e esse código só pode haver js, nada de linguagem

nativa, e não vou usar um banco, tudo baseado em FTP para fazer a busca de acordo com o preenchimento do formulario.

Vou colocar o exemplo do codigo que consegui fazer até agora.

Ex:

<html>

<head>

<script type="text/javascript">

function populate(s1,s2){

var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";



if(s1.value == "CEJ"){

var optionArray = ["|","SPF | SPF", "JORNADA | JORNADA", "REVISTA | REVISTA", "SERIE|SERIE"];

}else if(s1.value == "TNU"){

var optionArray = ["|","DEDICADO | DEDICADO", "DEDICADO | DEDICADO", "DEDICADO | DEDICADO", "DEDICADO|DEDICADO"];


}else if(s1.value == "CG"){

var optionArray = ["|","RESERVADO | RESERVADO", "RESERVADO | RESERVADO", "RESERVADO | RESERVADO", "RESERVADO |RESERVADO"];


}

for(var option in optionArray){

var pair = optionArray[option] .split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);


}
}

$(function(){
var acesso = new Array();

$(".ACESSO").each(function(index){
acesso.push($(this).val());
});

alert(acesso[0]);
});


</script>
</head>

<body>

<h2>Centro de Estudos Juridicos</h2>


<form action="" >
<hr />
Selecione a secao:
<select id="slct1" name="slct1" onchange="populate(this.id, 'slct2')">


<option value="">--Selecione o setor--</option>
<option value="CEJ">CEJ</option>
<option value="TNU">TNU</option>
<option value="CG">CG</option>

</select>

<hr />
Tipo de Publicacao:
<select id="slct2" name="slct2">

<option value="">--Selecione o Tipo de Publicacao--</option>

</select>

<hr />

N:

<select id="slct3" name="REVISTA">

<option value="">--Selecione o numero da Edicao--</option>
<option value="56" id="rev">56</option>
<option value="57">57</option>
<option value="58">58</option>

</select>

<hr />

Workshop:

<select id="slct4" name="slct4">

<option value="">--Selecione o workshop--</option>

</select>

<hr />

Jornada:

<select id="slct5" name="slct5">

<option value="">--Selecione a jornada--</option>

</select></BR>

<p class="button">
<input type="submit" value="Buscar" />
</p>


</form>
</body>
</html>

Consegui fazer a dependência do combo 1 e 2 agora preciso ligar o combo 1, 2 ao 3 e assim sucessivamente, até satisfazer os campos do formulario.

Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 0
Alan Silva

Alan Silva

Postado
  • Autor
Postado

Cara não seria melhor usar banco de dados para guardar as informações? Senão conforme sua apliação vai cescendo você vai ter muito trabalho para dar manutenção.

valeu. Rumão pela dica já estou trabalhando no banco de dados, estava prevendo isso a administração de todos esses dados.

Link para o comentário
Compartilhar em outros sites
  • 0
Alan Silva

Alan Silva

Postado
  • Autor
Postado

Bom Pessoal depois de quebrar bastante a cabeça para criar varios combos dependentes apenas com javascript, o resultado foi esse!!!

Obs: Como estou criando um aplicativo para ser empacotado pelo Adobe PhoneGap, não pude utilizar nenhuma linguagem de programação nativa, apenas HTML5, CSS E JAVA SCRIPT,

e claro que o codigo pode ser melhorado com a eliminação de algumas redundacias, o forum está livre para criticas, novas ideias e opniões, pois sou um iniciante em programação com java script.

<script language="JavaScript" type="text/javascript">
<!--

/*
*** Combo boxes ou Selects de combinação dinâmica
*** Por Edgar Melo e Alan Silva, 18 de Dezembro de 2013
*** Script desenvolvido para criação do aplicativo CEJ
***
***Por Favor, não remova este comentário
*/

// Este script foi desenvolvido com o objetivo de suportar um número ilimitado de combinações entre os combos
// O ID deve ser "combo_0", "combo_1", "combo_2", "combo_3" etc.
// Aqui você deve ser inseridos os dados que irá preencher as caixas do combo boxes ou caixas de combinações
// O nome data_2_1 será a primeira opção do combo box
// Qaundo o primeiro combo box é selecionado, o segundo combo carrega as opções referentes ao primeiro combo selecionado


// Primeira combinação combo box "combinação"

data_1 = new Option("CEJ", "$");
data_2 = new Option("TNU", "$$");
data_3 = new Option("CG", "$$");

// Segunda combinação combo box "combinação"

data_1_1 = new Option("SPF", "-");
data_1_2 = new Option("JORNADA", "-");
data_1_3 = new Option("REVISTA", "-");
data_1_4 = new Option("SERIE", "-");
data_2_1 = new Option("Dedicado", "--");
data_2_2 = new Option("Dedicado", "--");
data_2_3 = new Option("Dedicado", "--");
data_2_4 = new Option("Dedicado", "--");
data_2_5 = new Option("Dedicado", "--");
data_3_1 = new Option("Reservado", "--");
data_3_2 = new Option("Reservado", "--");
data_3_3 = new Option("Reservado", "--");

// Terceira combinação combo box "combinação"

data_1_1_1 = new Option("Workshop 1", "*");
data_1_1_2 = new Option("Workshop 2", "*");
data_1_1_3 = new Option("Workshop 3", "*");
data_1_2_1 = new Option("Direito Civil", "*");
data_1_2_2 = new Option("Direito Comercial", "*");
data_1_3_1 = new Option("58", "*");
data_1_3_2 = new Option("59", "*");
data_1_3_3 = new Option("60", "*");
data_1_4_1 = new Option("Cadernos", "*");
data_1_4_2 = new Option("Pesquisas", "*");
data_1_4_3 = new Option("Monografias", "*");
data_2_2_1 = new Option("221", "**");
data_2_2_2 = new Option("222", "**");
data_2_3_1 = new Option("231", "***");
data_2_3_2 = new Option("232", "***");

// Quarta combinação combo box "combinação"
data_1_4_1_1 = new Option("Volume 13", "*");
data_1_4_1_2 = new Option("Volume 14", "*");
data_1_4_1_3 = new Option("Volume 15", "*");
data_1_4_2_1 = new Option("Volume 13", "*");
data_1_4_2_2 = new Option("Volume 14", "*");
data_1_4_2_3 = new Option("Volume 15", "*");
data_1_4_3_1 = new Option("Volume 13", "*");
data_1_4_3_2 = new Option("Volume 14", "*");
data_1_4_3_3 = new Option("Volume 15", "*");
data_2_2_1_1 = new Option("2211","%")
data_2_2_1_2 = new Option("2212","%%")

// Outros paramentros

displaywhenempty=""
valuewhenempty=-1

displaywhennotempty="-selecione-"
valuewhennotempty=0


function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];

i=parseInt(currentbox)+1

// Esvazia todas as caixas de combinações, segui a atual

while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// Esvazia todas as opções exceto o primeiro (não é permitido)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// Eu redefini a primeira opção
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}


// Agora criei a string com o nome de "base" ("stringa"), ie. "data_1_0"
// Acrescento add _0,_1,_2,_3 etc, para obter o nome da caixa de combinação a ser preenchida

stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}


// Preenchendo o combo "filho" (if exists, se existir)

following=parseInt(currentbox)+1

if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

// Se não há opções, esvaziar a primeira opção do combo "son"(filho)
// Caso contrario, "-selecione-" uma opção

if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus!=null) {
combostatus=combostatus+cstatus
i=i+1
}
return combostatus;
}
}

//-->
</script>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...