Solved

How to get values from one drop down dependant on other

Posted on 2004-04-20
7
289 Views
Last Modified: 2011-09-20
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
Comment
Question by:jackjeckyl
  • 4
  • 2
7 Comments
 
LVL 46

Accepted Solution

by:
fritz_the_blank earned 125 total points
ID: 10872837
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
 
LVL 31

Expert Comment

by:alorentz
ID: 10872846
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
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 10872849
For details, see my articles here:

http://www.fairfieldconsulting.com/codecorner.asp
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 10872909
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
 

Author Comment

by:jackjeckyl
ID: 10878710
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
 

Author Comment

by:jackjeckyl
ID: 10879085
Never mind, I got it.  Thanks.
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 10881900
Glad to have helped,

FtB
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
Hello, all! I just recently started using Microsoft's IIS 7.5 within Windows 7, as I just downloaded and installed the 90 day trial of Windows 7. (Got to love Microsoft for allowing 90 days) The main reason for downloading and testing Windows 7 is t…
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …
Many functions in Excel can make decisions. The most simple of these is the IF function: it returns a value depending on whether a condition you describe is true or false. Once you get the hang of using the IF function, you will find it easier to us…

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now