Rebuild drop-down menu ....

[Vic Spainhower]

I have 2 drop-down menus (1) States (2) Shows By State. My question is how
do I invoke a re-build of the Shows By State drop-down when the user
requests a different state. I believe this has to be done with Javascript
and I don't know Javascript. Could someone supply a small example of how
this is done?

I am using PHP and MySQL. Following is the PHP code for building the state
drop-down menu:

<tr><td bgcolor="#EFC891" width="496" align="left"><b>Select a Show in Your
State:&nbsp;&nbsp;

<select name="ShowState" >
<?php
$stateName=getStateName();
$stateCode=getStateCode();
for ($n=1;$n<=50;$n++)
{
$state=$stateName[$n];
$scode=$stateCode[$n];
echo "<option value='$scode'";
if ($scode== $searchState)
echo " selected";
echo ">$state\n";
}
?>
</select>

Thanks,

Vic

 

[RobG]

I have 2 drop-down menus (1) States (2) Shows By State. My question is how
do I invoke a re-build of the Shows By State drop-down when the user
requests a different state. I believe this has to be done with Javascript
and I don't know Javascript. Could someone supply a small example of how
this is done?

I am using PHP and MySQL. Following is the PHP code for building the state
drop-down menu:

Not much help in a JavaScript forum, post what is actually delivered to
the client. Anyhow, below is an example of what you are after. It
includes some methods that work in Pocket IE (there's a recent thread
about that), guessing that mobile browsers may be a target for this.

The "PocketIE-ness" should not stop it from working in any other
browser, it is all DOM compliant.

You may want to run the reset function onload too. If the form is
submitted without a show selected, the server can return a new page with
the shows select filled in (i.e. you can add support for no-script clients).



<script type="text/javascript">
var showList = {
'':['Select a state first...'],
'Sarawak':['OomPah LoomPah Men','Azoro Mud Men','Thorny Warriors'],
'Borneo':['Wild Men (of)','Sisters of Crazyness','Pook Pook Pumpers']
};
function showShows( selA, selB )
{
var i = selA.selectedIndex;

// This gets the shows from an array, but it could get them using
// XMLHttpRequest or similar.
var shows = showList[selA.value];
var newOpt;
selB.disabled = !i;

// This function helps out with Pocket IE
delOptions(selB);

// If PocketIE support is not important, the above function call
// can be replaced with:
// selB.options.length = 0;

for (var k=0, j=shows.length; k<j; k++){

// This method is compatible with Pocket IE
newOpt = new Option(shows[k], shows[k]);
selB.options.add(newOpt, k);

// This can be used instead if PocketIE compatibility
// is of no interest
// selB.options[k] = new Option(shows[k], shows[k]);

}
}

function delOptions( sel )
{
while (sel.options.length) sel.remove(0);
}

function resetSels( a, b )
{
a[0].selected = true;
showShows( a, b);
}
</script>


<form action="">
<div>
<select name="stateSel" onchange="showShows(this, this.form.showSel);">
<option value="" selected>Select a state</option>
<option value="Sarawak">Sarawak</option>
<option value="Borneo">Borneo</option>
</select>
<select name="showSel" disabled>
<option value="" selected>Select a state first...</option>
</select>
<br>
<input type="reset" onclick="
resetSels(this.form.stateSel, this.form.showSel);
">
<input type="submit">
</div>
</form>

[...]