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

Discussion in 'Javascript' started by Bonge Boo!, Apr 22, 2005.

  1. Bonge Boo!

    Bonge Boo! Guest

    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.
    Bonge Boo!, Apr 22, 2005
    #1
    1. Advertising

  2. Bonge Boo!

    RobG Guest

    Re: Dumb question about using a <SELECT> menu to change the stateof <SELECT> menu...

    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).selectedIndex = 0;
    }
    }
    </script>





    --
    Rob
    RobG, Apr 23, 2005
    #2
    1. Advertising

  3. Bonge Boo!

    Bonge Boo! Guest

    Re: Dumb question about using a <SELECT> menu to change the stateof <SELECT> menu...

    On 23/4/05 2:38 am, in article
    4269a7f3$0$814$, "RobG"
    <> 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).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?
    Bonge Boo!, Apr 23, 2005
    #3
  4. Bonge Boo!

    RobB Guest

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

    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))
    {
    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>
    RobB, Apr 23, 2005
    #4
  5. Bonge Boo!

    RobG Guest

    Re: Dumb question about using a <SELECT> menu to change the stateof <SELECT> menu...

    Bonge Boo! wrote:
    > On 23/4/05 2:38 am, in article
    > 4269a7f3$0$814$, "RobG"
    > <> 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).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
    RobG, Apr 24, 2005
    #5
  6. Bonge Boo!

    Bonge Boo! Guest

    Re: Dumb question about using a <SELECT> menu to change the stateof <SELECT> menu...

    On 24/4/05 7:34 am, in article
    426b3ef9$0$24084$, "RobG"
    <> 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.
    Bonge Boo!, Apr 25, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mark Healey

    Probably a dumb s/// question.

    Mark Healey, Mar 16, 2005, in forum: Perl
    Replies:
    2
    Views:
    507
    Glenn Jackman
    Mar 16, 2005
  2. Tibby

    Another dumb question

    Tibby, Jul 31, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    365
    Tibby
    Aug 5, 2003
  3. ItNerd

    Basic simple dumb question

    ItNerd, Apr 14, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    1,543
    ItNerd
    Apr 15, 2004
  4. Ben Finney
    Replies:
    2
    Views:
    318
    Damjan
    May 22, 2006
  5. Jerry C.
    Replies:
    8
    Views:
    214
    Uri Guttman
    Nov 23, 2003
Loading...

Share This Page