Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Dumb question about using a <SELECT> menu to change the state of<SELECT> menu...

Reply
Thread Tools

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

 
 
Bonge Boo!
Guest
Posts: n/a
 
      04-22-2005
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.


 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      04-23-2005
Bonge Boo! wrote:
> 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[i]).selectedIndex = 0;
}
}
</script>





--
Rob
 
Reply With Quote
 
 
 
 
Bonge Boo!
Guest
Posts: n/a
 
      04-23-2005
On 23/4/05 2:38 am, in article
4269a7f3$0$814$(E-Mail Removed), "RobG"
<(E-Mail Removed)> wrote:

>> 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[i]).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?

 
Reply With Quote
 
RobB
Guest
Posts: n/a
 
      04-23-2005
Bonge Boo! wrote:
> 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[i]))
{
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>

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      04-24-2005
Bonge Boo! wrote:
> On 23/4/05 2:38 am, in article
> 4269a7f3$0$814$(E-Mail Removed), "RobG"
> <(E-Mail Removed)> wrote:
>
>
>>>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[i]).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/>



--
Rob
 
Reply With Quote
 
Bonge Boo!
Guest
Posts: n/a
 
      04-25-2005
On 24/4/05 7:34 am, in article
426b3ef9$0$24084$(E-Mail Removed), "RobG"
<(E-Mail Removed)> wrote:

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.

>> 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/>


Thank you.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Dumb, Dumb Vista Au79 Computer Support 4 02-11-2007 03:40 PM
How to print a state flow graph for a state machine using Xilinx ISE or ModelSim Weng Tianxiang VHDL 3 07-25-2006 01:19 PM
Dumb, dumb dumb Qestion David Napierkowski Digital Photography 6 10-31-2004 11:14 PM
dumb question maybe, but......using a pix w/o a router possible? A. Yarrington Cisco 1 12-02-2003 08:44 PM
dumb newbie question (or newbie dumb question) Jerry C. Perl Misc 8 11-23-2003 04:11 AM



Advertisments