Multiple Linked Drop-Downs using the XMLHTTP object

See a working example of this code Back to Tutorials

MultiDropDownXMLHTTP1.asp 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>XMLHTTP Test</title>
<script>
function getHTTPObject() {
  var req = false;
  // branch for native XMLHttpRequest object
  if(window.XMLHttpRequest) {
    try {req = new XMLHttpRequest();}
    catch(e) {req = false;}
    // branch for IE/Windows ActiveX version
  } 
  else if(window.ActiveXObject) {
    try {req = new ActiveXObject("Msxml2.XMLHTTP");} 
    catch(e) {
      try {req = new ActiveXObject("Microsoft.XMLHTTP");} 
      catch(e) {req = false;}
    }
  }
  return req;
}

function fill(sel) {
  oHttp = getHTTPObject();
  if (oHttp.readyState != 0) {oHttp.abort();}
  var yr_sel = document.getElementById('yr');
  var mk_sel = document.getElementById('mk');
  var mod_sel = document.getElementById('mod');
  var style_sel = document.getElementById('style');
  var sel_to_fill = document.getElementById(sel);

  //clear all selects from the one we are filling on
  //make the vars we need for the argument string
  switch(sel){
    case 'yr': yr_sel.options.length = 0;
    case 'mk': mk_sel.options.length = 0;
    case 'mod': mod_sel.options.length = 0;
    case 'style': style_sel.options.length = 0;
  }
  var mod = ""
  var mk = ""
  var yr = ""
  if (yr_sel.options.length > 0) yr = yr_sel.options[yr_sel.selectedIndex].value;
  if (mod_sel.options.length > 0) mod = mod_sel.options[mod_sel.selectedIndex].value;
  if (mk_sel.options.length > 0) mk = mk_sel.options[mk_sel.selectedIndex].value;
  var sURL = "MultiDropDownXMLHttp2.asp";
  sURL += "?year=" + yr + "&make=" + mk + "&model=" + mod;
  oHttp.open("get", sURL , true);
  oHttp.onreadystatechange = function () {
    if (oHttp.readyState == 4) {
      var options = oHttp.responseText.split(",");
      sel_to_fill.options[0] = new Option("Choose One:","");
      for (i=1;i<=options.length;i++) {
        sel_to_fill.options[i] = new Option(options[i-1],options[i-1]);
      }
    }
  }
  oHttp.send(null);
}
</script>
<style type=text/css>
.lbl {width:50px;
float:left;
}
</style>
</head>
<body>
<% 
' This section is just to display the results. Normally you
' would submit to another page, or have this page save the 
' results to a database.

if request.form("yr") > "" then
response.write("<b>You Selected: </b><br />")
response.write("Year: " & request.form("yr") & "<br />")
response.write("Make: " & request.form("mk") & "<br />")
response.write("Model: " & request.form("mod") & "<br />")
response.write("Engine: " & request.form("style") & "<br />")
response.write("<input type=button value='Close Window' onclick='window.close();' />")
response.end
end if
%>
<form method="post" name="frmCars">
<div class="lbl">Year:</div><select name="yr" id="yr" onchange="fill('mk');" ></select><br />
<div class="lbl">Make:</div><select name="mk" id="mk" onchange="fill('mod');"></select><br />
<div class="lbl">Model:</div><select name="mod" id="mod" onchange="fill('style');"></select><br />
<div class="lbl">Engine:</div><select name="style" id="style"></select><br />
<input type=submit />
</form>
<script>fill('yr');</script>

</body>

</html>

 

MultiDropDownXMLHTTP2.asp 
<%option explicit%>
<!-- #include file="dataopen2.asp" -->
<%
dim sql, rs, aRS, vString, i
if request.querystring("year") = "" then
  sql = "Select distinct [year] " &_
        "From tbCars " &_
        "Order by Year"
elseif request.querystring("make") = "" then ' we need to look up makes
  sql = "Select distinct Make " &_
        "From tbCars " &_
        "Where year = " & request.querystring("Year") & " " &_
        "Order by Make"
elseif request.querystring("model") = "" then ' we need to look up models
  sql = "Select distinct Model " &_
        "From tbCars " &_
        "Where year = " & request.querystring("Year") &_
        " and make = '" & request.querystring("make") & "' " &_
        "Order by model"
else
  sql = "Select distinct Engine " &_
        "From tbCars " &_
        "Where year = " & request.querystring("Year") &_
        " and make = '" & request.querystring("make") & "' " &_
        " and model = '" & request.querystring("model") & "' " &_
        "Order by engine"
end if
set rs = conn.execute(sql)
' use getRows() to convert the Recordset to an array
' then close the recordset and connection
aRS = rs.getRows()
rs.close
set rs=nothing
conn.close
set conn=nothing
' loop through the data
for i = 0 to ubound(aRS,2)
  vString = vString & aRS(0,i) & ","
next
' Remove final comma
vString = Left(vString,len(vString)-1)
' Output the string 
response.write(vString)
%>