• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 302
  • Last Modified:

How to get values from one drop down dependant on other

I need a code example of how I can get a drop down box to populate after the user selects a value from another drop down box.  

In other words, the first box will automatically contain values, the second blank.  Once a user chooses a value from the first drop down box, this value will be queried to a database and the values returned should populate the second drop down box.

Javascript preferred.  I don't want the page to refresh, if at all possible.
0
jackjeckyl
Asked:
jackjeckyl
  • 4
  • 2
1 Solution
 
fritz_the_blankCommented:
Here is a JavaScript solution for you:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--

// Populate an array with all of the models from the different
// manufactures in the order that the manufacturers appear in the
// drop-down list. In this example, I'll use Ford and Toyota
// of course, you'll want to generate these via server-side vbscript

models = new Array(3)
models [0] = new Array(1)
models [1]= new Array(3)
models [2] = new Array(4)

//Empty (0)
models [0][0] = " "

//Ford  (1)
models [1] [0] = "Tempo"
models [1] [1] = "Tauras"
models [1] [2] = "Windstar"

//Toyota   (2)
models [2][0] = "Tercel"
models [2][1] = "Corolla"
models [2][2] = "Camry"
models [2][3] = "Avalon"


//============================================

//Next, we create a function to fill the second drop down from
//the array based on the item selected in the first drop down.

function FillList()
{
var num=document.formname.manufacturer.selectedIndex
var boxlength = 0

document.formname.models.selectedIndex = 0
for ( ctr=0;ctr<models[num].length;ctr++)
 {
 boxlength++;
 document.formname.models.options[ctr] = new Option(models[num] [ctr], models[num][ctr]);
 }

document.formname.models.length = boxlength;
document.formname.models.options.length = boxlength;
document.formname.models.focus() ;

}


//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM action="" method=post id=form1 name=formname>
<SELECT id=select1 name=manufacturer onChange="JavaScript:FillList()">
<OPTION value=""></OPTION>
<OPTION value=Ford >Ford</OPTION>
<OPTION value=Toyota>Toyota</OPTION>

</SELECT>

<p>
<SELECT id=select2 name=models>
<OPTION></OPTION>
</SELECT>

</FORM>
</BODY>
</HTML>
0
 
alorentzCommented:
My want to post in Javascript area for Javascript answer, but here is ASP methoid:

http://www.experts-exchange.com/Web/Web_Languages/ASP/Q_20955847.html
0
 
fritz_the_blankCommented:
For details, see my articles here:

http://www.fairfieldconsulting.com/codecorner.asp
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
fritz_the_blankCommented:
My server-side solution:

<%@ Language = VBScript %>
<%Option Explicit%>
<%Response.Buffer = True%>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<%
dim  strDataPath, strConnectString, objConnection, strCountry, strRegion, strCity, objRS, strSelected

strCountry = Request.Form("Country")
strRegion = Request.Form("Region")
strCity = Request.Form("City")


'set connection strings for entire application
strDataPath = server.MapPath("NorthWind.mdb")
strConnectString = "Provider=Microsoft.Jet.OLEDB.4.0;User ID=Admin;"_
                  + " Data Source= " & strDataPath & ";"_
                  + " Mode=Share Deny None;User Id=admin;PASSWORD=;"
                  
if not IsObject("ojbConnection") then
      set objConnection=Server.CreateObject("ADODB.Connection")
      objConnection.ConnectionTimeout = 15
      objConnection.CommandTimeout =  10
      objConnection.Mode = 3 'adModeReadWrite
      if objConnection.state = 0 then
            objConnection.Open strConnectString
      end if
end if

sub makeCountry()
      if not isObject("objRS") then
            set objRS=Server.CreateObject("ADODB.RecordSet")
      end if
      if objRS.state <> 0 then
            objRS.close
      end if
      objRS.Open "SELECT DISTINCT Country  FROM Customers ORDER BY Country",objConnection,3,3
      Response.Write("<option></option>" & VBCRLF )
      do while not objRS.EOF
            if objRS("Country") = strCountry then
                  strSelected = " Selected "
            else
                  strSelected = ""
            end if
            Response.Write("<option" & strSelected & ">" & objRS("Country") & "</option>" & VBCRLF )
            objRS.MoveNext
      loop
      objRS.Close
      set objRS=Nothing
end sub

sub makeRegion()
      if strCountry <> "" then
            if not isObject("objRS") then
                  set objRS=Server.CreateObject("ADODB.RecordSet")
            end if
            if objRS.state <> 0 then
                  objRS.close
            end if
            objRS.Open "SELECT DISTINCT Region FROM Customers WHERE Country = '" & strCountry & "' ORDER BY Region",objConnection,3,3
            if objRS.eof then
                  Response.Write("<option>No Regions Found</option>")
            else
                  Response.Write("<option>Select Region Now</option>" & VBCRLF )
                  do while not objRS.EOF
                        if objRS("Region") = strRegion then
                              strSelected = " Selected "
                        else
                              strSelected = ""
                        end if
                        Response.Write("<option" & strSelected & ">" & objRS("Region") & "</option>" & VBCRLF )
                        objRS.MoveNext
                  loop
            end if
            objRS.Close
            set objRS=Nothing
      else
            Response.Write("<option>Select a Country First</option>")
      end if
end sub

sub makeCity()
      if strRegion <> "Select a Country First" AND  strRegion <> "Select Region Now" AND strRegion <>"" then
            if not isObject("objRS") then
                  set objRS=Server.CreateObject("ADODB.RecordSet")
            end if
            if objRS.state <> 0 then
                  objRS.close
            end if
            objRS.Open "SELECT DISTINCT City FROM Customers WHERE Region = '" & strRegion & "' ORDER BY City",objConnection,3,3
            if objRS.eof then
                  Response.Write("<option>No Cities Found</option>")
            else
                  Response.Write("<option>Select City Now</option>" & VBCRLF )
                  do while not objRS.EOF
                        if objRS("City") = strCity then
                              strSelected = " Selected "
                        else
                              strSelected = ""
                        end if
                        Response.Write("<option" & strSelected & ">" & objRS("City") & "</option>" & VBCRLF )
                        objRS.MoveNext
                  loop
            end if
            objRS.Close
            set objRS=Nothing
      else
            Response.Write("<option>Select a Region First</option>")
      end if
end sub
%>

<SCRIPT LANGUAGE=javascript>
<!--

function submitCountry(){
      var objForm = document.forms[0];
      objForm.elements['Region'].selectedIndex=0;
      objForm.elements['City'].selectedIndex = 0;
      objForm.submit();
}
function submitRegion(){
      var objForm = document.forms[0];
      objForm.elements['City'].selectedIndex = 0;
      objForm.submit();
}

function submitForm(){
      var objForm = document.forms[0];
      objForm.action = "http://www.FairfieldConsulting.com/processform.asp"
      return true;
}
//-->
</SCRIPT>

</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1 onSubmit="return submitForm()">
<SELECT  name="Country" onChange="submitCountry()">
      <%call  makeCountry%>
</SELECT><br>
<SELECT  name="Region" onChange="submitRegion()">
      <%call makeRegion%>
</SELECT><br>
<SELECT  name="City">
      <%call makeCity%>
</SELECT><br>

<p><INPUT type="submit" value="Submit" id=submit1 name=submit1></p>
</FORM>
</BODY>
<%
objConnection.Close
set objConnection = Nothing
%>

</HTML>


FtB
0
 
jackjeckylAuthor Commented:
fritz, I like your first example.  How do you get the selected item from the first select box?  

var objForm = document.forms[0];
var value = objForm.myfield.?
0
 
jackjeckylAuthor Commented:
Never mind, I got it.  Thanks.
0
 
fritz_the_blankCommented:
Glad to have helped,

FtB
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now