3 combos dinâmicos

davisvasconcellos · Julho 12, 2012

Procurei no lab. e adaptei o código do xanburzum, mas preciso "linkar" 03 combos.

comboA atualiza o comboB com o resultado do ajax (igual ao do script) e o comboB atualiza o comboC com o resultado deste outro ajax.

Fiz umas gambi brabas lá adaptando o script e até que funciona com um porém: Depois que se chega ao último combo, caso o usuário altere o primeiro os outros continuam com o valor anterior. o certo seria zerar os combos.

Assim:

ComboA

[RJ,SP,MG] - seleciona RJ

comboB

[Znorte,Zsul,Zoeste] - seleciona Zsul

ComboC

[copa,botafogo,flamengo] - seleciona Botafogo

dae o malandro clica no comboA e seleciona SP. Os outros combos continuam com as opções do RJ (Zsul,Botafogo) e o certo seria zerar.

achei uns exemplos que se lista tudo dentro do script e depois vai linkando com javascript. mas acho que pode ficar lento dependendo da quantidade de registros, sem falar que qq um pode ver o código fonte e pegar as informações todas do bd que foi impressa.

alguém tem um exemplo?

qq help já ajuda

saloeric · Julho 12, 2012

veja este exemplo com jquey para 4 combos, apenas tem que tirar o ultimo combo



//ao seleccionar o combo 1 executa isto
$("select[name=combo1]").change(function() {
   var id = $(this).val();
   $("select[name=combo2]").html('<option value="">Seleccione</option>');
   $("select[name=combo3").html('<option value="">Seleccione</option>');
   if(id != ""){
       $.ajax({
           type: "POST",
           url: "ajax/ajax.asp",
           data: "id="+id,
           success: function(msg){
               $("select[name=combo2]").html(msg);
           }
       });
   }else{
       $("select[name=combo2]").html('<option value="">Seleccione</option>');
   }
});

//ao seleccionar o combo2
$("select[name=combo2]").change(function() {
   var id = $(this).val();
   $("select[name=combo3]").html('<option value="">Seleccione</option>');
   if(id != ""){
       $.ajax({
           type: "POST",
           url: "ajax/ajax.asp",
           data: "id="+id,
           success: function(msg){
               $("select[name=combo3]").html(msg);
           }
       });
   }
   else{
       $("select[name=combo3]").html('<option value="">Seleccione</option>');
   }
});

// ao seleccionar o combo3
$("select[name=combo3]").change(function() {
   if($(this).val() != ""){
       $.ajax({
           type: "POST",
           url: "ajax/ajax.asp",
           data: "id="+$(this).val(),
           success: function(msg){
               $("select[name=combo4]").html(msg);
           }
       });
   }
});

xanburzum · Julho 12, 2012

olha este exemplo com AJAX, o codigo abaixo atualiza um segundo combo baseado na escolha do primeiro acessando o banco de dados sem dar refresh na página.Com uma estrutura de dados com duas tabelas:

tb_lanc_categ com os campos:

cod - Numeração Automática

categoria - Texto

e a tabela, tb_lanc_sub, com os campos:

cod_tipo - Numeração Automática

codcat - Número

desclanc - Texto

Arquivo index.asp

<% Response.Charset="ISO-8859-1" 'linha responsavel pela acentuação%>
<HTML>
<HEAD>
<TITLE>.:: Combos com AJAX ::.</TITLE>
<META NAME="Author" CONTENT="Wellington Marinheiro">
<script src="lanc_ComboAjax.js"> </script>
</HEAD>
<BODY>
<%  
if request.queryString("at")= "" then

   db = Server.MapPath("dados.mdb")
   Set cnn = Server.CreateObject("adodb.Connection")
   cnn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="& db &";"

   SQL="SELECT * FROM tb_Lanc_categ ORDER by categoria"
   SET rs = Server.CreateObject("Adodb.recordset")
   rs.Open SQL,cnn
   if not rs.eof then
       lista = rs.getrows()
       total = ubound(lista,2)
   end if
   rs.close
   set rs = nothing
   %>
   <CENTER>
   Utilizando AJAX para atualizar um COMBOBOX
   <hr>
   <form name="form" action="index.asp?at=1" method="post">
       <table border="1" bgcolor=#F4F4F4 width=40% align="center">
           <tr>
               <td><B>Categoria</B>
               <td>
                   <select name="categoria" class="select"  Onchange="atualizaLanc(this.value);">
                       <option value="">selecionar...

                       <%
                       for t=0 to total
                           response.write "<option value=" & lista(0,t) & "|" & lista(1,t) &">" & lista(1,t) & "</option>"
                       next%>
                   </select>
               <tr>
                   <td><B>Lançamento:</B>
                   <td>
                       <div id="lanc">
                           <select name="Lancamento">
                               <option value="">Selecionar categoria</option>
                           </select>
                       </div>
               <tr>
                   <td colspan="2" align="center">
                   <INPUT TYPE="submit" value="Enviar">
               </tr>
           </table>
       </form>
   </CENTER>
<%
else
       response.write "<div align=center><B>Resultado:</B><BR>"
       response.write "Categoria selecionada: " & request.Form("nomecat") & "<BR>"
       response.write "Lançamento: " & request.Form("lancamento") & "<BR><BR>"
       response.write "<A HREF='index.asp'>Nova escolha</A>"
       response.write "</div>"
end If
%>

</body>
</html>

Arquivo lanclista.asp

<% Response.Charset="ISO-8859-1" 'linha responsavel pela acentuação

db = Server.MapPath("dados.mdb")
Set cnn = Server.CreateObject("adodb.Connection")
cnn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="& db &";"

texto=Split(Request("ID"),"|")
cat = texto(0)

Set rs = Server.CreateObject("ADODB.Recordset")
sql = " Select * from tb_lanc_sub where codcat = " & cat & " order by desclanc"
rs.Open sql,cnn,3
%>
<select name="lancamento">
   <option value="">Selecionar categoria</option>
   <% while not rs.eof %>
           <option value="<%=rs("desclanc")%>"><%=rs("desclanc")%></option>
   <%        rs.MoveNext
   Wend%>
</select>
   <INPUT TYPE="hidden" NAME="nomecat" value="<%=texto(1)%>">
<%
rs.Close
Set rs = Nothing
%>

Arquivo lanc_comboajax.js

var requip;
function loadXMLDoc(url){
   requip = null;
   if (window.XMLHttpRequest) {
       requip= new XMLHttpRequest();
       requip.onreadystatechange = ProcessEquip; // o req.  foi alterado para requip
       requip.open("POST", url, true); // o req.  foi alterado para requip
       requip.send(null); // o req.  foi alterado para requip

   } else if (window.ActiveXObject) {
       try {
           requip= new ActiveXObject("Msxml2.XMLHTTP.4.0");
       } catch(e) {
           try {
               requip= new ActiveXObject("Msxml2.XMLHTTP.3.0");
           } catch(e) {
               try {
                   requip= new ActiveXObject("Msxml2.XMLHTTP");
               } catch(e) {
                   try {
                       requip= new ActiveXObject("Microsoft.XMLHTTP");
                   } catch(e) {
                       requip= false;
                   }
               }
           }
       }
       if (requip) {
           requip.onreadystatechange = ProcessEquip;
           requip.open("POST", url, true);
           requip.send();
       }
   }
}


function ProcessEquip(){
   if (requip.readyState == 4) {
       if (requip.status == 200) {
           document.getElementById("lanc").innerHTML = requip.responseText;
       } else {
           alert("Houve um problema ao obter os dados:\n" + requip.statusText);
       }
   }
}
function atualizaLanc(valor){
   loadXMLDoc("lancListaComb.asp?ID="+valor);
}

e tem este outro, também

Default.asp

 
<html>  
<head>  
<title>Teste Combo</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<script language="javascript" src="ajax.js"></script>  
</head>  
<body>  
Categoria:  
<select name="categoria" onchange="alimentarCombo(this.value);">  
   <option value="">[ Selecione ]</option>  
    <%  
    set rs = conn.execute("SELECT codigo, nome FROM categoria ORDER BY nome ASC")  
       if (not rs.eof) then  
            while (not rs.eof)  
                response.write("<option value="""&rs("codigo")&""">"&rs("nome")&"</option>")  
         rs.moveNext : wend  
       end if  
    set rs = nothing  
   %>  
</select>  
<br>  
Sub-Categoria: <div id="resultado"></div>  
</body>  
</html>

ajax.js

    function GetXMLHttp() {  
     if (navigator.appName == "Microsoft Internet Explorer") {  
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
     } else {  
         xmlHttp = new XMLHttpRequest();  
   }  
     return xmlHttp;  
}  
 var mod = GetXMLHttp();  

function alimentarCombo(valor) {  
     mod.open("GET", "Carrega.ajax.asp?id="+valor+"", true);  
     mod.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
     mod.onreadystatechange = function() {  
         if (mod.readyState == 4) {  
             document.getElementById("resultado").innerHTML = mod.responseText;  
         }  
    };  
    mod.send(null);  
 }

Carrega.ajax.asp

   <select name="sub_categoria">  
   <option value="">[ Selecione ]</option>  
    <%  
    set rs = conn.execute("SELECT codigo, nome FROM sub_categoria WHERE categoria_id = '"&request.queryString("id")&"'")  
        if (not rs.eof) then  
            while (not rs.eof)  
                response.write("<option value="""&rs("codigo")&""">"&rs("nome")&"</option>")  
            rs.moveNext :wend           end if  
    set rs = nothing  
    %>  
</select>

e tem outros exemplos que postei no lab. de script, dá uma pesquisada

Entrar

Arquivado

3 combos dinâmicos

Recommended Posts

davisvasconcellos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

saloeric 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

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

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante