470,855 Members | 1,166 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,855 developers. It's quick & easy.

Rebuild drop-down menu ....

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
Oct 5 '05 #1
1 1823
Vic Spainhower wrote:
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[i].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>

[...]

--
Rob
Oct 6 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Rod Davis | last post: by
3 posts views Thread by Ant | last post: by
2 posts views Thread by Pinnguy | last post: by
10 posts views Thread by wackyphill | last post: by
4 posts views Thread by RAM | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.