473,326 Members | 2,010 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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

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.
Jul 23 '05 #1
6 2363
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.


Post the relevant code.
Jul 23 '05 #2
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
Jul 23 '05 #3
On 23/4/05 2:38 am, in article
42*********************@per-qv1-newsreader-01.iinet.net.au, "RobG"
<rg***@iinet.net.auau> 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?

Jul 23 '05 #4
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>

Jul 23 '05 #5
Bonge Boo! wrote:
On 23/4/05 2:38 am, in article
42*********************@per-qv1-newsreader-01.iinet.net.au, "RobG"
<rg***@iinet.net.auau> 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
Jul 23 '05 #6
On 24/4/05 7:34 am, in article
42***********************@per-qv1-newsreader-01.iinet.net.au, "RobG"
<rg***@iinet.net.auau> 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.

Jul 23 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Laphan | last post by:
Hi All Could you please confirm what the syntax is to change the style of a <SELECT> box using CSS. I basically want to take the 3D effect off this box, but it doesn't seem to be possible...
3
by: frodo | last post by:
Hi, I'm new here ( Hi all ), and my problem is: Is possible to change layout of drop-down list made with <select> & <option> tags. I don't like this ugly gray arrow, slider etc. in normal...
3
by: Chamomile | last post by:
I've only just come accross this newsgroup, so apologies if I seem to be cross-posting... this may be an old chestnut, but has anyone ever come accross a straightforward way of styling a...
3
by: gekoblu | last post by:
Hi!, I want to fix via javascript the combo width to a fix value. I'd like to implement a kind of ALT / TITLE function to show the entire option when the text is longer than the combo width......
2
by: Astra | last post by:
Hi All Wondered if you could help me with the below query. I have 1 simple table called STOCKCATS that consists of 2 fields. These fields are called CATID and LEVEL. The contents of this...
3
by: i_dvlp | last post by:
I'm trying to replicate a fancy drop-down control (MS-egads!) with form <select><option> It doesn't look like you can specity width as an attribute or define width with CSS. It looks like my...
4
by: Man-wai Chang | last post by:
-- iTech Consulting Co., Ltd. Expert of ePOS solutions Website: http://www.itech.com.hk (IE only) Tel: (852)2325 3883 Fax: (852)2325 8288
1
by: mcapacci | last post by:
I would like to force the flow of the scrolling of the options listed in a drop down menu, <select>, from top to bottom without allowing bottom up scroll to appear; furthermore I need also to...
1
by: akoymakoy | last post by:
Good Day I have these line of codes in my javascript ...... if (selObj.type == 'text' ) { parentObj = document.getElementById('destinationCity').parentNode; ...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.