Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy combobox dropdown list height

    hi all
    i have a problem in form combo box i have a number of car makers name in combo box but want its list to be less in length as when i click on it, very lengthy list of car makers appears so i want to minimize its length my code is
    Code:
    <div class="mainbody_mid_left_portions"><h3>Maker</h3>
                                                            <select name="mkr" id="mkr" style="width:130px;" onchange="show_brand(this.value)" class="frm_box_font">
                        <option value="Select Maker">Select Maker</option>
                            <?php
                            do
                            {
                            ?>
                   <option value="<?php echo $row_maker['maker_id'] ?>" ><?php echo $row_maker['maker_name']; ?></option>
                   <?php
    			   } while($row_maker = mysql_fetch_assoc($rs_maker));
    			   ?>
                   </select>
                   </div>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    <select> has an optional size attribute which goes some way to giving you what you want in that it restricts the number of visible options. However, if this is set to (say) 10, then ten options are always visible, which isn't perhaps exactly what you want.

    I guess you could use some javascript to dynamically change the size attribute when the user hovers over the dropdown/selects an option. If so you'd need to position the select absolutely otherwise following text will be pushed down when the size is changed.

    Feels a bit clunky...maybe there's a better way.

  • #3
    New Coder
    Join Date
    Aug 2009
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi
    thnx for ur sugestion but size is not the solution and honestly m new to javascript so m not getting what to do. so if u can guide me it would be really appretiating....

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I'm not a javascript expert, but something like:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    window.onload=setup;
    
    function setup()
    {
    document.getElementById("select1").onmouseover = extendDropDown;
    document.getElementById("select1").onchange = resetDropDown;
    document.getElementById("select1").onmouseout = resetDropDown;//in case user doesn't select anything
    }
    
    function extendDropDown()
    {
    document.getElementById("select1").size = 6;
    }
    
    function resetDropDown()
    {
    document.getElementById("select1").size = 1;
    }
    
    
    </script>
    <style type="text/css" media="screen">
    fieldset{position:relative;height:30px;width:200px}
    select{position:absolute;top:0;left:0}
    </style>
    </head>
    
    <body>
    <form action="#" method="post">
    <fieldset>
    <select id="select1" size="1">
    <option>Select..</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
    <option>Seven</option>
    <option>Eight</option>
    <option>Nine</option>
    <option>Ten</option>
    <option>Eleven</option>
    <option>Twelve</option>
    <option>Thirteen</option>
    </select>
    </fieldset>
    </form>
    <p>Some text underneath the select</p>
    </body>
    </html>


  •  

    Posting Permissions

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