Results 1 to 6 of 6

Thread: "Opening" a dropdown box from Javascript?

  1. #1
    Join Date
    Mar 2007
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default "Opening" a dropdown box from Javascript?

    To try to explain it as easy as possible, lets say I have a dropdown box (Select) and I have a normal button, and when I press that button I would like the dropdown box to "open" itself and show the different options just as if I had clicked that box itself.

    A simplified version of my real problem, but I hope you undestand what I am trying to accomplish and that someone knows if its possible in any way other than making a "new" dropdown box myself. I would prefer to use the built in one for this problem.

  2. #2
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    Have you tried making the box larger, ie you can see more than one box at a time. I'm sure this can be done with DOM or Javascript.
    Use the size property.

    this is a fudge to your original request, but it would show the options nevertheless.


  3. #3
    Join Date
    Mar 2007
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Well, thanks for the suggestion, but what I want a popup-like feature by being able to "open" a dropdown box just like when its clicked on.

    I can ofcourse do a DOM Popup thingy myself, but I would prefer if there was some way to get a dropdown box to actually open itself instead.

  4. #4
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    Code:
    <select id="sel" onClick="Javascript:this.size=1">
    <option value="1">Hello1</option>
    <option value="1">Hello2</option>
    <option value="1">Hello3</option>
    <option value="1">Hello4</option>
    <option value="1">Hello5</option>
    <option value="1">Hello6</option>
    <option value="1">Hello7</option>
    <option value="1">Hello8</option>
    </select>
    
    <script>
    
    
    el = document.getElementById("sel");
    el.size = el.options.length;
    
    
    </script>

  5. #5
    Join Date
    Mar 2007
    Posts
    32
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the suggestion, but this changes the dropdown box into a selectbox, so anything below the box will be pushed down, and I would like the box items appear on top of whats below the dropdown box, just as a dropdown box works when you click it.

    Again thanks for the idea anyway.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #sel {
    position:absolute;
    }
    </style>
    <script type="text/javascript">
    function openSel(el){
    var el = document.getElementById(el)
    var el1 = el.cloneNode(true);
    el1.size = el.options.length;
    el.parentNode.replaceChild(el1, el);
    }
    </script>
    
    </head>
    <body>
    <input type="button" value="open" onclick="openSel('sel');"><br>
    <div style="position:relative;float:left;width:4em;height:1.2em;"><select id="sel" onclick="this.size=1">
    <option value="1">Hello1</option>
    <option value="1">Hello2</option>
    <option value="1">Hello3</option>
    <option value="1">Hello4</option>
    <option value="1">Hello5</option>
    <option value="1">Hello6</option>
    <option value="1">Hello7</option>
    <option value="1">Hello8</option>
    </select></div>
    <div style="clear:left;">other content</div>
    
    </body>
    </html>
    Notes: Cloning and replacing the node was only required in Opera to overcome an apparent bug in assigning a size to a select that had no size attribute or one of 1 or less. Otherwise, it could have been:

    Code:
    function openSel(el){
    var el = document.getElementById(el)
    el.size = el.options.length;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •