i Have created this script, but i dont know why the second select box is not showing...
Maybe my ASP is wrong??
look:
HERE is the demo page
this is the script:
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<%
strConnection ="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="& Server.MapPath("database/banco.mdb") &";"
set objConn = Server.CreateObject("ADODB.Connection")
objConn.open strConnection
set rs_lojas = Server.Createobject("ADODB.RecordSet")
rs_lojas.Open "select * FROM ondeencontrar WHERE estado = '"& request("estado")&"'", objConn
If estado = "" Then
estado = trim(Request("estado"))
session("estado") = true
End if
If cidade = "" Then
modelo = trim(Request("cidade"))
session("cidade") = true
End if
%>
<% set rs_estado = Server.Createobject("ADODB.RecordSet")
rs_estado.Open "SELECT distinct estado FROM ondeencontrar", objConn
%>
<script>
$("#first-choice").change(function() {
$("#second-choice").load("estados.asp?estado=" + $("#first-choice").val());
$("#second-choice").show("slow");
});
$("#second-choice").change(function() {
alter("TESTE");
});
</script>
<select id="first-choice">
<option selected value="">Escolha um Estado</option>
<%do while not rs_estado.eof%>
<option value="<%=rs_estado("estado")%>"><%=rs_estado("estado")%></option>
<% rs_estado.MoveNext
if rs_estado.EOF then Exit do %>
<% Loop %>
</select>
<br /> <br />
<%
If not trim(Request("estado")) = "" then
set rs_cidade = Server.Createobject("ADODB.RecordSet")
rs_cidade.Open "SELECT distinct cidade, estado FROM ondeencontrar where estado = '"&estado&"'", objConn
%>
<select id="second-choice" style="display: none;">
<option selected="<%=cidade%>"><%=cidade%></option>
<% do while not rs_cidade.eof %>
<option value="ondeencontrar.asp?estado=<%=request("estado")%>&cidade=<%=rs_cidade("cidade")%>"><%=rs_cidade("cidade")%></option>
<%
rs_cidade.MoveNext
if rs_cidade.EOF then Exit do
%>
<% Loop %>
</select>
<%End If%>
Your jQuery selectors needs to be inside document.ready or be moved way below in the end before the body tag ends. You're selecting elements that hasn't been rendered yet.
Like so:
$(function(){
$("#first-choice").change(function() {
$("#second-choice").load("estados.asp?estado=" + $("#first-choice").val());
$("#second-choice").show("slow");
});
$("#second-choice").change(function() {
alter("TESTE");
});
});
This URL (http://fakedc.com/sites/luilui/teste.asp) also needs to return a JSON or XML object so it can be loaded into the second select item. It currently doesn't.
This line also wouldn't work since you're performing an AJAX request.
If not trim(Request("estado")) = "" then
The 2nd select element depends on the 1st select element's option selection so I'd would move the 2nd query into an AJAX call and populate the 2nd select.
The second select is not even rendered in the page because it doesn't pass the If not trim(Request("estado")) = "" then
conditional.
display:none
from select, and now the second select is showing but when i choose any State from first select, not happens... - Preston 2012-04-04 01:22
From Firebug:
"NetworkError: 404 Not Found - http://fakedc.com/sites/luilui/jquery-1.7.1.min.js"
Also:
$ is not defined
You might want to check the source path for your jQuery include.