I've done something similar using JavaScript on our site for lists of makes &
models of cars. The first box displays a list of makes, and depending on the
make selected, the second displays all the models for that make. That list is
huge, but here's an abbreviated version using a few makes:
<InvalidTag language="JavaScript">
function models_ChangeMenu()
{
NewOpt = new Array;
NewVal = new Array;
menuNum =
document.search.make.options[document.search.make.selectedIndex].value;
if (document.search.make.selectedIndex == 0)
{
document.search.model.disabled = true;
}
else
{
document.search.model.disabled = false;
document.search.model.focus();
}
if (menuNum == "Wartburg")
{
NewOpt[0] = new Option("-Search All " +
document.search.make[document.search.make.selectedIndex].text + " Models");
NewOpt[0].value = '';
NewOpt[1] = new Option("1.3"); NewOpt[1].value = "1.3";
NewOpt[2] = new Option("311"); NewOpt[2].value = "311";
NewOpt[3] = new Option("312"); NewOpt[3].value = "312";
NewOpt[4] = new Option("353"); NewOpt[4].value =
"353";
}
if (menuNum == "Bond Bug")
{
NewOpt[0] = new Option("-Search All " +
document.search.make[document.search.make.selectedIndex].text + " Models");
NewOpt[0].value = '';
NewOpt[1] = new Option("700E"); NewOpt[1].value =
"700E";
NewOpt[2] = new Option("700ES"); NewOpt[2].value
= "700ES";
NewOpt[3] = new Option("750E"); NewOpt[3].value =
"750E";
NewOpt[4] = new Option("750ES"); NewOpt[4].value
= "750ES";
}
if (menuNum == "Bobsy")
{
NewOpt[0] = new Option("-Search All " +
document.search.make[document.search.make.selectedIndex].text + " Models");
NewOpt[0].value = '';
NewOpt[1] = new Option("SR2"); NewOpt[1].value =
"SR2";
}
tot = NewOpt.length;
lst = document.search.model.options.length;
for (i = lst; i > 0; i--) {
document.search.model.options[i] = null;
}
for (i = 0; i < tot; i++) {
document.search.model.options[i] = NewOpt[i];
}
document.search.model.options[0].selected = true;
}
</script>
The form part would look something like this:
<form action"[action_address_here]" method="post" name="search" id="search">
<select name="make" onchange="models_ChangeMenu()">
<option value="">-Search All Makes</option>
<option value="Wartburg">Wartburg</option>
<option value="Bond Bug">Bond Bug</option>
<option value="Bobsy">Bobsy</option>
</select>
<select name="model" onfocus="models_ChangeMenu()">
<option value="">-Search All Models</option>
</select>
</form>
When the selected value of the first drop-down changes, the second displays the
associated values that are specified for that selection in the javascript (the
same happens when the onfocus event is triggered in the second drop-down).
It's probably worth mentioning that this implementation puts the processing on
the client. I'm not sure how this will come through on the forum, so feel free
to email me for a copy of this code.
</jeremy>
>Look for TwoSelectsRelated tag in the Exchange
>I have used it in the past along with ThreeSelectsRelated
>
>-----Original Message-----
>From: Discover Antartica [mailto:[EMAIL PROTECTED]
>Sent: Wednesday, February 09, 2005 4:27 PM
>To: CF-Talk
>Subject: how to display data in two select boxes where the second one's
>display depends on the first one
>
>I want to display the data in two select boxes. For example, I want to
>display two select boxes. In the first one I want to display the list of
>the category of employees (like full time, part time, contract, etc)
>
>On the second select list i want to display the list of employees in
>that category. For example, if the user clicks on the part time then the
>second box should display all part time employees only.
>
>Is there a easy way for this?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Logware (www.logware.us): a new and convenient web-based time tracking
application. Start tracking and documenting hours spent on a project or with a
client with Logware today. Try it for free with a 15 day trial account.
http://www.houseoffusion.com/banners/view.cfm?bannerid=67
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:194033
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
Donations & Support: http://www.houseoffusion.com/tiny.cfm/54
