Combo Dinâmico com AJAX

26 de março de 2009 - 08:25

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>

Fonte: TedK

O que você achou deste conteúdo?