Triplo Combo Dinâmico sem Ajax

Alex_ps · Novembro 14, 2009

Pessoal,

Estou há quase 5 dias brigando com diversos scripts de combos triplos dinâmicos, mas até agora não consegui nada.

Não foi por falta de tentar, pois já testei diversos daqui do fórum e de outros fóruns e tutorias.

A grande maioria deles é em Ajax, mas só consigo fazer o Ajax funcionar no Firefox, não funciona nem a pau no Explorer, o que cá entre nós, não dá pra encarar.

É um Bug no Explorer na interpretação do InnerHtml, que inclusive é descrito no site da Microsoft.

Achei este script abaixo, muito legal, do Gustavo Faelli nos tutoriais ASP aqui do Imasters. Funcionou legal, mas é para 2 combox.

Tentei fazer uma adaptação para 3 combos, mas o meu javascript é sofrível e, apesar de eu achar que estou fazendo tudo certo, o terceiro combo não funciona. Pior é que eu não sei nem se dá pra fazer funcionar.

Estou postando abaixo o código do Gustavo e o que eu complementei.

Alguém poderia por favor dar uma olhada e uma força?

Por favorzão?

<%Option Explicit%>

<%
Dim Conn

Set Conn = Server.CreateObject("ADODB.Connection") 
Conn.open (Application("ConnLoja"))
%>

<html>
<body>

<%
Dim SQL_Cat, RS_Cat
Dim SQL_Cat2, RS_Cat2
Dim SQL_Prod, RS_Prod
Dim SQL_Count, RS_Count
%>

<form name="form1" action="teste-combo-duplo.asp" method="post">
<select name="txt_secao" onChange="BuscaProdutos()" style="width: 200px">
<% 'aqui setamos na propriedade onChange, a função BuscaProdutos(). A cada mudança, a função é executada.%>
<option>-- Selecione --</option>
<%
'Fazemos a busca de todas as Secoes para preencher o primeiro combo.
SQL_Cat = "select * from tbl_Secoes order by SecaoNome"
Set RS_Cat = Conn.Execute(SQL_Cat)

Do Until RS_Cat.EOF
  Response.Write "<option value="&RS_Cat("SecaoID")&">"&RS_Cat("SecaoNome")&"</option>"
  RS_Cat.MoveNext
Loop
%>
</select>
<br>
<%'nesse outro combo, não definimos nenhuma opção (option). Ele apenas receberá o retorno da função.%>
<select name="txt_categoria" style="width: 200px">
</select>
<input type="submit" value="Enviar">

</form>


</body>
<html>



<%'Vamos então analisar a função BuscaProdutos()%>
<script>
function BuscaProdutos()
{
//a variável secao vai receber o valor selecionado na primeira combo (txt_secao) 
var secao = document.form1.txt_secao.options[document.form1.txt_secao.selectedIndex].value;

//setamos duas variáveis auxiliares que irão ser utilizadas para controles
var controle = 0
var contador = 0

<%
'Listamos as secaos
SQL_Cat2 = "select * from tbl_Secoes order by SecaoNome"
Set RS_Cat2 = Conn.Execute(SQL_Cat2)

'Enquanto não for final de arquivo, listamos os produtos da secao atual (que está no loop)
Do Until RS_Cat2.EOF
  SQL_Prod = "select * from tbl_Categorias where SecaoID = '"&RS_Cat2("SecaoID")&"'"
  Set RS_Prod = Conn.Execute(SQL_Prod)

  'Vamos verificar a quantidade de registros encontrados. Serve também como um controle.
  SQL_Count = "select count(*) as maximo from tbl_Categorias where SecaoID = '"&RS_Cat2("SecaoID")&"'"
  Set RS_Count = Conn.Execute(SQL_Count)

  Do Until RS_Prod.EOF
  %>
   //Enquanto não for fim de arquivo, verificamos se o produto retornado pertence à secao guardada na
   //variável secao (Java Script) e se nosso "controle" é menor que o máximo de registros.
   //Se tudo estiver OK, incrementamos "controle" e "contador" e escrevemos a nova opção em txt_categoria.
   //Reparem que "contador" atua como a posição que o registro ocupará no combo.
    if(<%=RS_Prod("SecaoID")%> == secao && controle < <%=RS_Count("maximo")%>)
    {
       controle++
       document.form1.txt_categoria.options[contador]=new Option('<%=RS_Prod("CatNome")%>','<%=RS_Prod("CatID")%>');
       contador++
    }
<%
    RS_Prod.MoveNext
  Loop
  RS_Cat2.MoveNext
Loop
%>
}
</script>

Minha adaptação:


<%Option Explicit%>

<%
Dim Conn

Set Conn = Server.CreateObject("ADODB.Connection") 
Conn.open (Application("ConnLoja"))
%>

<html>
<body>

<%
Dim SQL_Sec, RS_Sec
Dim SQL_Sec2, RS_Sec2
Dim SQL_Cat, RS_Cat
Dim SQL_Count, RS_Count
Dim SQL_Cat2, RS_Cat2
Dim SQL_Count2, RS_Count2
Dim SQL_SubCat, RS_SubCat
%>

<form name="form1" action="teste-triplo-combo.asp" method="post">
<select name="txt_secao" onChange="BuscaCategorias()" style="width: 200px">
<% 'aqui setamos na propriedade onChange, a função BuscaProdutos(). A cada mudança, a função é executada.%>
<option>----  Selecione  ----</option>
<%
'Fazemos a busca de todas as Secoes para preencher o primeiro combo.
SQL_Sec = "select * from tbl_Secoes order by SecaoNome"
Set RS_Sec = Conn.Execute(SQL_Sec)

Do Until RS_Sec.EOF
  Response.Write "<option value="&RS_Sec("SecaoID")&">"&RS_Sec("SecaoNome")&"</option>"
  RS_Sec.MoveNext
Loop
%>
</select>
<br>
<%'nesse outro combo, não definimos nenhuma opção (option). Ele apenas receberá o retorno da função.%>
<select name="txt_categoria" onChange="BuscaSubCategorias()" style="width: 200px">
</select>
<br>
<%'nesse outro combo, não definimos nenhuma opção (option). Ele apenas receberá o retorno da função.%>
<select name="txt_subcategoria" style="width: 200px">
</select>
<br>

<input type="submit" value="Enviar">

</form>


</body>
<html>



<%'Vamos então analisar a função BuscaCategorias()%>
<script>
function BuscaCategorias()
{
//a variável secao vai receber o valor selecionado na primeira combo (txt_secao) 
var secao = document.form1.txt_secao.options[document.form1.txt_secao.selectedIndex].value;

//setamos duas variáveis auxiliares que irão ser utilizadas para controles
var controle = 0
var contador = 0

<%
'Listamos as secaos
SQL_Sec2 = "select * from tbl_Secoes order by SecaoNome"
Set RS_Sec2 = Conn.Execute(SQL_Sec2)

'Enquanto não for final de arquivo, listamos os produtos da secao atual (que está no loop)
Do Until RS_Sec2.EOF
  SQL_Cat = "select * from tbl_Categorias where SecaoID = '"&RS_Sec2("SecaoID")&"'"
  Set RS_Cat = Conn.Execute(SQL_Cat)

  'Vamos verificar a quantidade de registros encontrados. Serve também como um controle.
  SQL_Count = "select count(*) as maximo from tbl_Categorias where SecaoID = '"&RS_Sec2("SecaoID")&"'"
  Set RS_Count = Conn.Execute(SQL_Count)

  Do Until RS_Cat.EOF
  %>
   //Enquanto não for fim de arquivo, verificamos se o produto retornado pertence à secao guardada na
   //variável secao (Java Script) e se nosso "controle" é menor que o máximo de registros.
   //Se tudo estiver OK, incrementamos "controle" e "contador" e escrevemos a nova opção em txt_categoria.
   //Reparem que "contador" atua como a posição que o registro ocupará no combo.
    if(<%=RS_Cat("SecaoID")%> == secao && controle < <%=RS_Count("maximo")%>)
    {

       controle++
       document.form1.txt_categoria.options[contador]=new Option('<%=RS_Cat("CatNome")%>','<%=RS_Cat("CatID")%>');
       contador++
    }
<%
    RS_Cat.MoveNext
  Loop
  RS_Sec2.MoveNext
Loop
%>
}
</script>


<%'Vamos então analisar a função BuscaSubCategorias()%>
<script>
function BuscaSubCategorias()
{
//a variável secao vai receber o valor selecionado na segunda combo (txt_categoria) 
var categoria = document.form1.txt_categoria.options[document.form1.txt_categoria.selectedIndex].value;

document.write (categoria)


//setamos duas variáveis auxiliares que irão ser utilizadas para controles
var controle1 = 0
var contador1 = 0

<%
'Listamos as categorias
SQL_Cat2 = "select * from tbl_Categorias order by CatNome"
Set RS_Cat2 = Conn.Execute(SQL_Cat2)

'Enquanto não for final de arquivo, listamos os SubCategorias da Categoria atual (que está no loop)
Do Until RS_Cat2.EOF
  SQL_SubCat = "select * from tbl_SubCategorias where CatID = '"&RS_Cat2("CatID")&"'"
  Set RS_SubCat = Conn.Execute(SQL_SubCat)

  'Vamos verificar a quantidade de registros encontrados. Serve também como um controle.
  SQL_Count2 = "select count(*) as max from tbl_SubCategorias where CatID = '"&RS_Cat2("CatID")&"'"
  Set RS_Count2 = Conn.Execute(SQL_Count2)

  Do Until RS_SubCat.EOF
  %>
   //Enquanto não for fim de arquivo, verificamos se a subcategoria retornada pertence à categoria guardada na
   //variável categoria (Java Script) e se nosso "controle1" é menor que o máximo de registros.
   //Se tudo estiver OK, incrementamos "controle1" e "contador1" e escrevemos a nova opção em txt_subcategoria.
   //Reparem que "contador1" atua como a posição que o registro ocupará no combo.
    if(<%=RS_SubCat("CatID")%> == categoria && controle1 < <%=RS_Count2("max")%>)
    {
       controle1++
       document.form1.txt_subcategoria.options[contador1]=new Option('<%=RS_SubCat("SubCatNome")%>','<%=RS_SubCat("SubCatID")%>');
       contador1++
    }
<%
    RS_SubCat.MoveNext
  Loop
  RS_Cat2.MoveNext
Loop
%>
}
</script>

Na realidade não muda muito, algumas variáveis e a Função BuscaSubCategorias, que é onde o erro aparece - ERRO: BuscarSubCategorias is not defined.

Obrigado e um abraço,

Alexandre

xanburzum · Novembro 14, 2009

existe um exemplo k colokei no lab. de script, este script faz o preenchemento de um combo e pega o valor do combo preenchido pra fazer o outro combo, tipo,um combo pais e outro combo estado , você pode implementa-lo

Patrique · Novembro 14, 2009

combo com 3 selects

<script>
function troca(n,i) {

var select1 = document.form.select1;

// esvazia numeros
if(n=="numeros" && i=="vazio") {
document.forms['form'].letras.options.length = 0;
document.forms['form'].letras.options[0] = new Option('Escolha','');
}

// esvazia letras
if(n=="letras" && i=="vazio") {
document.forms['form'].outros.options.length = 0;
document.forms['form'].outros.options[0] = new Option('Escolha','');
}

//// 1º SELECT PREENCHE 2º SELECT ////

// OPÇÃO 1 //
if(n=="numeros" && i=="1") {
document.forms['form'].letras.options[0] = new Option('clique','vazio');
document.forms['form'].letras.options[1] = new Option('letra a','letra a');
document.forms['form'].letras.options[2] = new Option('letra b','letra b');
}

// OPÇÃO 2 //
if(n=="numeros" && i=="2") {
document.forms['form'].letras.options[0] = new Option('clique','vazio');
document.forms['form'].letras.options[1] = new Option('letra c','letra c');
document.forms['form'].letras.options[2] = new Option('letra d','letra d');
}


//// 2º SELECT PREENCHE TERCEIRO SELECT ////

// letra a (2º select) //
if(n=="letras" && i=="letra a") {
document.forms['form'].outros.options[0] = new Option('clique','vazio');
document.forms['form'].outros.options[1] = new Option('amarelo','amarelo');
document.forms['form'].outros.options[2] = new Option('azul','azul');
}

// letra b (2º select) //
if(n=="letras" && i=="letra b") {
document.forms['form'].outros.options[0] = new Option('clique','vazio');
document.forms['form'].outros.options[1] = new Option('branco','branco');
document.forms['form'].outros.options[2] = new Option('bege','bege');
}

// letra c (2º select) //
if(n=="letras" && i=="letra c") {
document.forms['form'].outros.options[0] = new Option('clique','vazio');
document.forms['form'].outros.options[1] = new Option('cinza','cinza');
document.forms['form'].outros.options[2] = new Option('creme','creme');
}

// letra d (2º select) //
if(n=="letras" && i=="letra d") {
document.forms['form'].outros.options[0] = new Option('clique','vazio');
document.forms['form'].outros.options[1] = new Option('damasco','damasco');
}

}
</script>

<form name="form" action="" method="POST">

select 1 (números): <select name="numeros" onChange="troca('numeros',this.value)">
<option value="vazio" selected>escolha</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

select 2 (letras): <select name="letras" onChange="troca('letras',this.value)">
<option value="" selected>escolha</option>
</select>

select 3 (cores): <select name="outros">
<option value="" selected>escolha</option>
</select>

</form>

xanburzum · Novembro 14, 2009

no caso ele esta populando as combos pelo db, existe um exemplo k colokei no lab. de script e um com 3 combo ja , porem utilizando AJAX,mas analisa esse code, é facil mplementar um 3º

as tabelas saun: 

pais- com os campos 
cod_pais - chave primária 
nome 

estado -c om os campos 
cod_pais - chave estrangeira 
cod_estado 
nome 

as tabelas possuem relacionamento de um para muitos 

<% Option Explicit 

'declaro as var 
dim var1,var2,var3,....., etc 
'recupero as var 
varpais=request.querystring("pais") 
'crioa a conexao 
%> 

<!--# include file="conexao/conexao.asp"--> 

<% 
'abro a conexao 
Call abre_conexao 
'crio o rs 
set rspais=server.createobject("ADODB.Recordset") 
'crio a SQL 
SQLpais="SELECT * FROM pais ORDER BY nome" 
rspais.open SQLpais,conexao,1,3 
%> 


'aki vou criar o combo, onde no evento onchange ele irá enviar o value do combo pais para a mesma pag, para eu recuperar o codigo do pais e assim preencher o combo estado. 

<form action="inserirend_action.asp" method="post"name="frmteste"> 
<select name="pais" size="1" Onchange="window.navigate('pag_atual.asp?pais='+frmteste.pais.value)"> 

<% while not rspais.eof%> 
<option value="<%=rs("cod_pais")%>"> 
<% if varpais=rs("pais") then 
response.write("Selecionado") 
end if%> 
<%=rs("nome")%> 
</option> 
<% rspais.movenext 
wend%> 
</select> 
<% set rspais=nothing%> 

'aki crio o combo estado 

<select name="estado"size="1"> 
if request("pais") ="" then%> 
<option value=""> selecione um pais 
<%else 
'crio o SQL estado 
SQLestado="Select * from estado where cod_pais="&varpais&" Order by nome" 
'crio o rsestado 
set rsestado=server.createobject("ADODB.Recordset") 
rsestado.open SQLestado,conexao,1,3 
<%while not rsestado.eof%> 
<option value="<%=rsestado("cod_estado")%>"> 
<%=rs("nome")%> 
</option> 
<%rs.movenext 
wend 
end if%> 
</select> 
<% set rsestado=nothing%> 
<% 'fecho a conexao 
call fecha_conexao%>

se você naun consefuir, você pode até fazer em ASP.net, facil tb

Alex_ps · Novembro 14, 2009

Xamburzum,

Agradeço por suas respostas, mas eu realmente já vi quase tudo que tem aqui no fórum e realmente não consegui entender, não como eu preciso.

Por favor veja, no caso que você citou acima, você está chamando o estado e o que eu preciso criar dinamicamente, conforme aparece no código que eu postei é a cidade.

Com relação ao Ajax, já segui na linga "Get", "Post" e não teve jeito.

Entendo inclusive o artifício de colocar uma div de direcionamento, como quando é utilizado no AJAX, mas mesmo assim da erro.

Tenho outros scripts em javascript, um deles muito 10 do Hamid Cheheltani, só que como o código que o Patrique postou, é populado manualmente, o que não dá.

No script que eu postei, eu entendo a forma como o segundo combo captura a informação do primeiro, mas se tento aplicá-la no terceiro combo, capturando informações do segundo, não funciona.

Acabo de dar uma olhada, como você sugeriu, na área Laboratório de scripts, mas não achei o que você está falando. Achei um script da Andréia, mas é o tal Ajax que não funfa, nem a pau no Explorer. Tens o link?

Com relação ao ASP.Net, pensei em tentar por aí, mas o problema é que a página contém muitos outros registros e eu teria que entender um monte de coisa de ASP.net que eu não conheço, para conseguir funcionar.

Há alguns dias, vi um script que você postou, que chama a terceira combo de dentro da função da segunda combo, o que para mim, aliado a função onchange, seria a solução.

O problema neste caso é que a função da segunda combo é um loop e é finalizada por código ASP. Daí eu não sei como fazer pra chamar depois do ASP.

Patrique,

Obrigado por sua resposta, mas os combos realmente precisam ser populados dinamicamente.

Vocês tem mais alguma sugestão?

Agradeço

Alexandre

xanburzum · Novembro 14, 2009

segue o exemplo k colokei , dae você apenas inclui mais uma combo

Alex_ps · Novembro 14, 2009

Xanburzum,

Obrigado por sua nova resposta.

Procurei em todos os posts do fórum que você participou com a palavra combo e, achei um que deve ser este que você está falando.

Não tinha visto este método de passar a variável através de onchange="window.navigate...". Muito 10!

Eu estava fazendo funcionar o seu código adaptado e funcionou 100% no Explorer, mas no Firefox da o seguinte erro:

window.navigate is not a function.

Você sabe como corrigir este erro?

Creio que não terei nenhum problema em colocar mais um combo seguindo seu script, por isso, posto um OK mais tarde!

Eu só gostaria de saber se você sabe corrigir o erro que está aparecendo, como disse acima.

Obrigado!

Alexandre

Alex_ps · Novembro 14, 2009

Xanburzum,

Troquei o Window.navigate() pela propriedade window.location = "URL".

Funcionou no Explorer e no Firefox.

Vou tentar colocar o 3 combo agora.

Muito obrigado, por sua grande ajuda!

Se eu não conseguir, dou um toque.

Abraços!

Alexandre

Arquivado

Triplo Combo Dinâmico sem Ajax

Recommended Posts

Alex_ps 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Patrique 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alex_ps 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alex_ps 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alex_ps 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante