open the options box associated with a select

Discussion in 'Javascript' started by ddailey, Apr 9, 2006.

  1. ddailey

    ddailey Guest

    I have a select named "s" in a form named "f":

    By default only one of the options in the select appears on the page --
    that is how I want it.

    What I'd like to do is simulate a click on the select so that all of
    its options become visible -- i.e., its option box opens to reveal all
    document.f.s.options.length options.

    I've tried the following:
    1. document.f.s.options[k].selected=true
    2. document.f.s.focus()
    3. document.f.s.click()
    4. document.f.s.size=document.f.s.options.length
    1. succeeds in changing the option which is visible but leaves the
    displayed number unchanged
    2. highlights the currently visible option-- indicating focus has been
    received
    3. appears to do nothing
    4. this changes the size of the visible rectangle, and is sort of what
    I want, except that the other options appear above the select's prior
    rectangle (hence disrupting extant page layout) rather than allowing
    the other options to "drop down" below as should happen when physically
    clicking on a select.

    I might just have to build a widget to do this, but thought someone
    might know of the proper method for effecting this behavior.

    TIA
    ddailey
     
    ddailey, Apr 9, 2006
    #1
    1. Advertising

  2. ddailey

    Hal Rosser Guest

    "ddailey" <> wrote in message
    news:...
    > I have a select named "s" in a form named "f":
    >
    > By default only one of the options in the select appears on the page --
    > that is how I want it.
    >
    > What I'd like to do is simulate a click on the select so that all of
    > its options become visible -- i.e., its option box opens to reveal all
    > document.f.s.options.length options.
    > TIA
    > ddailey
    >


    This is not exactly what you were wanting, but all options become visible.

    var theSize = document.forms["f"].elements["s"].length;
    document.forms["f"].elements["s"].size = theSize;

    then change theSize back to 1 and run the 2nd line again when you're done.
    it doesn't simulate a click, but all the options become visible.
    HTH
     
    Hal Rosser, Apr 9, 2006
    #2
    1. Advertising

  3. ddailey

    Jim Guest

    Hi There DDaily,
    plse check the following code out.
    Hopefully this is what you were looking for:
    <form name="f">
    <select name="s" onChange="this.multiple='true', this.size='5'">
    <option selected value=''>--- Automobile Types --- </option>
    <option value="ford">Ford</option>
    <option value="chevy">Chevrolet</option>
    <option value="honda">Honda</option>
    <option value="toyota">Toyota</option>
    </select>
    </form>
    The prior poster's code is more flexible as it detects the options
    length, which in the case of the above, (which is more specific) needs
    to be hard-coded into the form itself.

    In any event, I hope this helps!
    -Jim
     
    Jim, Apr 9, 2006
    #3
  4. Jim wrote:

    > <form name="f">


    The `action' attribute is required, setting the `name' attribute is
    unnecessary here.

    > <select name="s" onChange="this.multiple='true', this.size='5'">


    This may or may not work. The `multiple' property is of type boolean
    (true), not string ('true'). The `size' property is of type number (5),
    not string ('5').

    I do not see anything in the OP that justifies modifying the value of
    the `multiple' property here, thereby changing the behavior of the
    control completely.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Apr 9, 2006
    #4
  5. ddailey

    Matt Kruse Guest

    Matt Kruse, Apr 9, 2006
    #5
  6. ddailey

    Hal Rosser Guest

    "Matt Kruse" <> wrote in message
    news:...
    > Hal Rosser wrote:
    > > This is not exactly what you were wanting, but all options become
    > > visible.
    > > var theSize = document.forms["f"].elements["s"].length;
    > > document.forms["f"].elements["s"].size = theSize;

    >
    > Using similar logic, check out this proof of concept I did a while ago:
    > http://www.mattkruse.com/temp/expand_select.html
    >
    > It's not perfect and doesn't work in all cases but it's interesting.


    Kool, it works in IE, but in Firefox it changes back too quick.
     
    Hal Rosser, Apr 10, 2006
    #6
  7. ddailey

    RobG Guest

    Hal Rosser said on 10/04/2006 11:23 AM AEST:
    > "Matt Kruse" <> wrote in message
    > news:...
    >
    >>Hal Rosser wrote:
    >>
    >>>This is not exactly what you were wanting, but all options become
    >>>visible.
    >>>var theSize = document.forms["f"].elements["s"].length;
    >>>document.forms["f"].elements["s"].size = theSize;

    >>
    >>Using similar logic, check out this proof of concept I did a while ago:
    >>http://www.mattkruse.com/temp/expand_select.html
    >>
    >>It's not perfect and doesn't work in all cases but it's interesting.

    >
    >
    > Kool, it works in IE, but in Firefox it changes back too quick.


    Matt's use of a default button causes the form to submit (in Firefox),
    which appears to make the select 'change back'. IE's implementation of
    a button may be buggy in this respect.

    Use a button (or input) type="button" and that goes away (another reason
    to always specify attributes, even when you want the default).

    <URL:http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON>


    --
    Rob
    Group FAQ: <URL:http://www.jibbering.com/FAQ>
     
    RobG, Apr 10, 2006
    #7
  8. ddailey

    Matt Kruse Guest

    RobG wrote:
    > Matt's use of a default button causes the form to submit (in Firefox),
    > which appears to make the select 'change back'. IE's implementation
    > of a button may be buggy in this respect.


    Good catch. This page was a quick hack I did for an IE-specific site a while
    ago just to prove the concept. There are a few things which should certainly
    be cleaned up before using it for real!

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
     
    Matt Kruse, Apr 10, 2006
    #8
  9. ddailey

    Csaba Gabor Guest

    ddailey wrote:
    > I have a select named "s" in a form named "f":
    >
    > By default only one of the options in the select appears on the page --
    > that is how I want it.
    >
    > What I'd like to do is simulate a click on the select so that all of
    > its options become visible -- i.e., its option box opens to reveal all
    > document.f.s.options.length options.
    >
    > I've tried the following:

    ....

    There is a bug logged in Firefox
    (https://bugzilla.mozilla.org/show_bug.cgi?id=303713) that is supposed
    to be fixed for the next release (after 1.5.0.1) that would allow you
    to do this in FF by sythesizing an alt+down_arrow keypress event and
    dispatching it at the select element.

    Not wanting to wait, I rewrote my GreaseMonkey extension to include
    GM_sendKeys (documented at
    http://www.nabble.com/GM_sendKeys-t1421601.html) - example 3 shows how
    it covers your situation - and now I can do this on my machines. (In
    case you don't know, GreaseMonkey is an extension to FF that allows one
    to modify the pages (or page behaviour of the pages that you view on
    your own computers).

    Csaba Gabor from Vienna
     
    Csaba Gabor, Apr 11, 2006
    #9
  10. ddailey

    Hal Rosser Guest

    "RobG" <> wrote in message
    news:vuk_f.1006$...
    >
    > Matt's use of a default button causes the form to submit (in Firefox),
    > which appears to make the select 'change back'. IE's implementation of
    > a button may be buggy in this respect.
    >
    > Use a button (or input) type="button" and that goes away (another reason
    > to always specify attributes, even when you want the default).
    >
    > <URL:http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON>
    >


    Hmmm - learn something new every day.
    So the form 'submits' without a 'submit' button? But its not supposed to,
    right?
     
    Hal Rosser, Apr 12, 2006
    #10
  11. ddailey

    RobG Guest

    Hal Rosser said on 13/04/2006 7:32 AM AEST:
    > "RobG" <> wrote in message
    > news:vuk_f.1006$...
    >
    >>Matt's use of a default button causes the form to submit (in Firefox),
    >>which appears to make the select 'change back'. IE's implementation of
    >>a button may be buggy in this respect.
    >>
    >>Use a button (or input) type="button" and that goes away (another reason
    >>to always specify attributes, even when you want the default).
    >>
    >> <URL:http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON>
    >>

    >
    > Hmmm - learn something new every day.
    > So the form 'submits' without a 'submit' button? But its not supposed to,
    > right?


    Depends on your definition of 'supposed to'.

    In both Firefox 1.5 and IE 6 if a form has only one input element and it
    is 'successful', pressing 'enter' when the element has focus submits the
    form. In Firefox if there is also a submit button in the form (that is,
    either a button or input element of type submit), pressing enter in any
    input form control can submit the form - IE is different here.

    The HTML spec defines how to process a submit event, and that a submit
    button should cause it, but doesn't restrict submission to only submit
    buttons and scripts.

    The behaviour is not consistent across browsers or even different
    versions of the same browser. There are many scripts that attempt to
    make it consistent, most fail anyway and make individual browsers behave
    differently on different sites. It's a mess best left alone.


    .... But that is not the issue here ...

    A button element in a form has a default type of 'submit'. So marking
    up a button element like:

    <form action="">
    ...
    <button>I'm a button</button>
    ...
    </form>


    means that the form does have a submit button, just that type='submit'
    isn't explicitly stated as an attribute in the source markup. Nor does
    it have to be for valid HTML.

    I think it's bad form to not state default attributes because it makes
    the code harder to maintain, others feel it's not good as it adds
    unnecessary characters. Similarly for quoting attribute values like:

    ... rows=10 cols=25 ...


    I much prefer to see the value quoted even though they don't have to be.
    Ditto for semi-colons, line breaks, indenting ... to each their own.



    --
    Rob
    Group FAQ: <URL:http://www.jibbering.com/FAQ>
     
    RobG, Apr 13, 2006
    #11
  12. RobG wrote:
    <snip>
    > A button element in a form has a default type of 'submit'.
    > So marking up a button element like:
    >
    > <form action="">
    > ...
    > <button>I'm a button</button>
    > ...
    > </form>
    >
    >
    > means that the form does have a submit button, just that
    > type='submit' isn't explicitly stated as an attribute in
    > the source markup. Nor does it have to be for valid HTML.
    >
    > I think it's bad form to not state default attributes because
    > it makes the code harder to maintain, others feel it's not
    > good as it adds unnecessary characters. ...

    <snip>

    Providing BUTTON elements with a type attribute regardless of the
    existence of an official default is a good idea in practice largely
    because in IE the default is type="button" and so providing the
    attribute avoids the mark-up being interpreted in two distinct ways in
    different browsers.

    Richard.
     
    Richard Cornford, Apr 13, 2006
    #12
    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. Replies:
    5
    Views:
    755
  2. palmiere
    Replies:
    1
    Views:
    413
    Erwin Moller
    Feb 9, 2004
  3. bigrich
    Replies:
    2
    Views:
    224
    Sean Berry
    Jan 18, 2006
  4. jodleren
    Replies:
    2
    Views:
    111
    jodleren
    Mar 31, 2007
  5. mark4asp
    Replies:
    0
    Views:
    100
    mark4asp
    May 17, 2007
Loading...

Share This Page