Conditional menu javascript available?

Dev Shed Forums Sponsor:

April 18th, 2001, 12:12 AM

Tom Beidler

Junior Member

Join Date: Apr 2001

Location: Santa Barbara, CA, USA

Posts: 11

Time spent in forums: < 1 sec
Reputation Power: 0

I was wondering if someone could point me in the right direction. I'm looking for some base javascript for conditional pulldown menus.

Here's an example of what I mean by conditional pulldown menus. You have to pulldown menus on a page. The first one would have state and the second one would be city. If I selected California in the first, the second would only show California cities; i.e. San Francisco, Los Angeles. If I selected Ohio as the state the second would have Cleveland, Columbus.

I'm going to try and replicate the javascript using PHP and MySQL and I need some examples to start with.

Hope this is enough info.

Thanks in advance.
Tom

April 19th, 2001, 03:00 PM

phreq

Contributing User

Join Date: Mar 2001

Location: New Zealand

Posts: 167

Time spent in forums: 9 m 3 sec
Reputation Power: 13

Might help?

Hi Tom,

Since you are going to end up using php/mySQL, this example might be of more use than a straight javascript example.

This is for a page called dropbox.php:

<html>

<?php
if (!$StateID)
{
?>

<head>
<Script Language="Javascript">

// This function is triggered when the value in the select box changes. It takes the selected value and encodes it to the url of the page, which is refreshed to allow the php code to re-run.

function getCity()
{
var StateID = document.addressForm.State.options[document.addressForm.State.selectedIndex].value;

StateID = escape(StateID);

var goTo = "dropbox.php" + "?StateID=" + StateID;

window.location = goTo;
}

</Script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="addressForm" method="post" action="">
<p>State:
<select name="State" size="1" onChange="getCity()">
<option value="1">Ohio</option>
<option value="2">California</option>
<option value="3">New York</option>
</select>
</p>
<p>City:
<select name="city" size="1">
<option value="Cleveland">Cleveland</option>
<option value="Columbus">Columbus</option>
</select></p>
</form>
</body>
</html>

<?php
}

if ($StateID)
{
?>

<head>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="addressForm" method="post" action="">
<p>State: <select name='State' size='1'>

<?php
if ($StateID == 1)
{
echo "<option value='1' selected>Ohio</option>";
echo "</select>";
echo "<p>City: <select name='city' size='1'>";
echo "<option value='1' selected>Cleveland</option><option value='2'>Columbus</option>";
echo "</select></p>";
}
elseif ($StateID == 2)
{
echo "<option value='2' selected>California</option>";
echo "</select>";
echo "<p>City: <select name='city' size='1'>";
echo "<option value='3' selected>San Franscisco</option><option value='4'>Los Angeles</option>";
echo "</select></p>";
}
elseif ($StateID == 3)
{
echo "<option value='3' selected>New York</option>";
echo "</select>";
echo "<p>City: <select name='city' size='1'>";
echo "<option value='5' selected>New York</option><option value='6'>Townsville</option>";
echo "</select></p>";
}
?>

</form>
</body>
</html>

<?php
}
?>

You can easily replace that php code with code to reflect a result set from a mySQL query.

Hope that this is of some help to you. (PS - forgive the fact that I have no idea of any other cities in NY State than NYC... I'm a Kiwi

)

Jen

April 19th, 2001, 03:55 PM

Tom Beidler

Junior Member

Join Date: Apr 2001

Location: Santa Barbara, CA, USA

Posts: 11

Time spent in forums: < 1 sec
Reputation Power: 0

Jen,

Thanks it works and it maybe what I end up with but I have one concern. It reloads the page. It seems with javascript that wouldn't be an issue.

Checkout www.scottdrake.net . The search menu with years on the top right is what I'm interested in.

Thanks,
Tom

April 19th, 2001, 07:34 PM

szarecor

Contributing User

Join Date: Apr 2001

Location: New York

Posts: 122

Time spent in forums: < 1 sec
Reputation Power: 13

Tom, try calling the following function from the onChange event of your <select> tag:

<script language="Javascript">
function changeDependentList() {
var states_index = (document.form.state_list.selectedIndex);
var states_value = document.form.state_list.options[states_index].value;
//document.form.city_list.length = 0;
if (states_value != "") {
states_index --;
var state = document.form.state_list[states_index].value;
var len = states[states_index].length
for (i=0;i<len;i++) {
document.form.city_list.length ++;
document.form.city_list.options[i].value = states[states_index][i];
document.form.city_list.options[i].text = states[states_index][i];
}
document.form.city_list.length = len;
} else {
document.form.city_list.length = 1;
document.form.city_list.options[0].value = "";
document.form.city_list.options[0].text = "choose a state first";
}
}

var NY = new Array('New York','Albany','Yonkers','Monticello','Troy','Port Jervis');
var MA = new Array('Boston','Springfield','Somerville');
var GA = new Array('Atlanta','Macon','Augusta','Rome','Athens');

var states = new Array(NY,MA,GA);
</script>

For changeDependentList() to work, the value attributes of your first select list should match the names of the three arrays of cities. Like so:

<form name="form">
<select name="state_list" onChange="changeDependentList()">
<option value="">select one:</option>
<option value="NY">New York</option>
<option value="MA">Massachusets</option>
<option value="GA">Georgia</option>
</select>
<select name="city_list">
<option value="">__________________</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</form>

Also, your initial cities list must be as long as your largest array of cities, or Netscape will should some very odd behavior.

Good luck,
Scott

Conditional menu javascript available?

Developer Shed Advertisers and Affiliates