Dumb question about using a <SELECT> menu to change the state of<SELECT> menu...

[Bonge Boo!]

This has got to be obvious, but I can't make it work.

I have a form called with 3 pull down menus. They are linked to a database
which generates the values for the <SELECT? Pull-downs.

Lets say I have values selected for all three pull down menus.

When I change the first "top-level" menu I want to reset both the second and
third menus to the "default" state.

I thought this would be easy with some javascript on the pull down in
question like:

<select name="category" onchange="document.forms.form_field.options[0];">

So when I change category I reset my sub-categories and sub-sub-categories
back to NULL to avoid duff queries being made.

I've tried any number of iterations, but it still won't work.

Please put me out of my misery?

TIA.

 

[RobG]

This has got to be obvious, but I can't make it work.

I have a form called with 3 pull down menus. They are linked to a database
which generates the values for the <SELECT? Pull-downs.

Lets say I have values selected for all three pull down menus.

When I change the first "top-level" menu I want to reset both the second and
third menus to the "default" state.

I thought this would be easy with some javascript on the pull down in
question like:

<select name="category" onchange="document.forms.form_field.options[0];">

So when I change category I reset my sub-categories and sub-sub-categories
back to NULL to avoid duff queries being made.

You need to set the selectedIndex to zero:

<select ... onchange="this.form.form_field.selectedIndex = 0;">

or something like that, play code below.


<form action="">
<select name="set1" onchange="
this.form.set2.selectedIndex = 0;
this.form.set3.selectedIndex = 0;
">
<option>Set 1 Opt 0</option>
<option>Set 1 Opt 1</option>
<option>Set 1 Opt 2</option>
</select>

<select name="set2">
<option>Set 2 Opt 0</option>
<option>Set 2 Opt 1</option>
<option>Set 2 Opt 2</option>
</select>
<select name="set3">
<option>Set 3 Opt 0</option>
<option>Set 3 Opt 1</option>
<option>Set 3 Opt 2</option>
</select>
</form>


You may wish to write a function that does the job for you by running
through the other options rather than putting all the code in the
element tag.

Then the above selecte set1 could change to:

<select name="set1" onchange="
resetSel(this.form,'set2','set3');
">

if a function is added like this:

<script type="text/javascript">
function resetSel(){
var i = arguments.length;
while ( --i ){
arguments[0].elements(arguments).selectedIndex = 0;
}
}
</script>

 

[Bonge Boo!]

I thought this would be easy with some javascript on the pull down in
question like:

<select name="category" onchange="document.forms.form_field.options[0];">

So when I change category I reset my sub-categories and sub-sub-categories
back to NULL to avoid duff queries being made.

You need to set the selectedIndex to zero:

<select ... onchange="this.form.form_field.selectedIndex = 0;">

Thank you VERY much. I'm sure I'd tried that at some point but couldn't get
it working. So I started thrashing around elsewhere...

You may wish to write a function that does the job for you by running
through the other options rather than putting all the code in the
element tag.

Then the above selecte set1 could change to:

<select name="set1" onchange="
resetSel(this.form,'set2','set3');
">

if a function is added like this:

<script type="text/javascript">
function resetSel(){
var i = arguments.length;
while ( --i ){
arguments[0].elements(arguments).selectedIndex = 0;
}
}
</script>

Nice. Just because I'm stupid, arguments.length give us the number of
arguments I place into my function, and --i loops for the -1 number of
arguments I put in?

Bit of newbie to programming. I know PHP passing well, but find it difficult
trnslating that knowledge in anything but the most general way to other
languages like Javascript and Actionscript.

Last question. Do you have a suggestion for a "slightly above moron's level"
book on Javascript?

 

[RobB]

This has got to be obvious, but I can't make it work.

I have a form called with 3 pull down menus. They are linked to a database
which generates the values for the <SELECT? Pull-downs.

Lets say I have values selected for all three pull down menus.

When I change the first "top-level" menu I want to reset both the second and
third menus to the "default" state.

I thought this would be easy with some javascript on the pull down in
question like:

<select name="category" onchange="document.forms.form_field.options[0];">

So when I change category I reset my sub-categories and sub-sub-categories
back to NULL to avoid duff queries being made.

I've tried any number of iterations, but it still won't work.

Please put me out of my misery?

TIA.

Are these 'cascading selects' (each choice gets more specific)? If so,
the application itself should reset the dependent listboxes as needed.

Just for the record:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">

function ddreset()
{
if (document.getElementById)
{
var sel, o, j, l = arguments.length;
for (var i = 0; i < l; ++i)
{
if (sel = document.getElementById(arguments))
{
j = 0;
while (o = sel.options[j++])
if (o.defaultSelected)
o.selected = true;
}
}
}
}

</script>
</head>
<body>
<form>
<select id="toplevel" name="toplevel"
onchange="ddreset('second','third')">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>
<select id="second" name="second">
<option value="a">an option</option>
<option value="b">an option</option>
<option value="c">an option</option>
<option value="d">an option</option>
<option value="e" selected="selected">default option</option>
</select>
<select id="third" name="third">
<option value="aa">an option</option>
<option value="bb" selected="selected">default option</option>
<option value="cc">an option</option>
<option value="dd">an option</option>
<option value="ee">an option</option>
</select>
</form>
</body>
</html>

 

[RobG]

I thought this would be easy with some javascript on the pull down in
question like:

<select name="category" onchange="document.forms.form_field.options[0];">

So when I change category I reset my sub-categories and sub-sub-categories
back to NULL to avoid duff queries being made.

You need to set the selectedIndex to zero:

<select ... onchange="this.form.form_field.selectedIndex = 0;">

Thank you VERY much. I'm sure I'd tried that at some point but couldn't get
it working. So I started thrashing around elsewhere...

You may wish to write a function that does the job for you by running
through the other options rather than putting all the code in the
element tag.

Then the above selecte set1 could change to:

<select name="set1" onchange="
resetSel(this.form,'set2','set3');
">

if a function is added like this:

<script type="text/javascript">
function resetSel(){
var i = arguments.length;
while ( --i ){
arguments[0].elements(arguments).selectedIndex = 0;
}
}
</script>

Nice. Just because I'm stupid, arguments.length give us the number of
arguments I place into my function, and --i loops for the -1 number of
arguments I put in?

Yes. Using --i decrements i before it is evaluated by the 'while' so
when it gets to arguments[0] statements in the body are not executed.

If you want to execute the body when i=0 (which is the usual case)
use i-- so that i is decremented *after* being evaluated.

Bit of newbie to programming. I know PHP passing well, but find it difficult
trnslating that knowledge in anything but the most general way to other
languages like Javascript and Actionscript.

Last question. Do you have a suggestion for a "slightly above moron's level"
book on Javascript?

I can't recommend any other than to say the O'Reilly stuff is
usually pretty good. W3Schools have a reasonable set of online
starter tutorials, they also have some useful stuff on HTML, CSS and
other web technologies too.

<URL:http://www.w3schools.com/>

 

[Bonge Boo!]

On 24/4/05 7:34 am, in article
[email protected], "RobG"

Many thanks. Further your previous question, the contents of the 3 pop-up
menus are genereated by a PHP query to MYSQL.

So all I needed to do was reset the value of the "lower" down menus, along
with a this.form.submit() and presto verything works out nicely.

Ta very much.

Nice. Just because I'm stupid, arguments.length give us the number of
arguments I place into my function, and --i loops for the -1 number of
arguments I put in?

Yes. Using --i decrements i before it is evaluated by the 'while' so
when it gets to arguments[0] statements in the body are not executed.

If you want to execute the body when i=0 (which is the usual case)
use i-- so that i is decremented *after* being evaluated.

Ah! Didn't know the side made a difference. Very handy.

I can't recommend any other than to say the O'Reilly stuff is
usually pretty good. W3Schools have a reasonable set of online
starter tutorials, they also have some useful stuff on HTML, CSS and
other web technologies too.

<URL:http://www.w3schools.com/>

Thank you.