View Full Version : combobox dropdown list height

11-11-2009, 08:46 AM
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

<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>
<option value="<?php echo $row_maker['maker_id'] ?>" ><?php echo $row_maker['maker_name']; ?></option>
} while($row_maker = mysql_fetch_assoc($rs_maker));

11-11-2009, 10:32 AM
<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.:(

11-12-2009, 06:22 AM
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....

11-12-2009, 09:12 AM
I'm not a javascript expert, but something like:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">

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;

<style type="text/css" media="screen">

<form action="#" method="post">
<select id="select1" size="1">
<p>Some text underneath the select</p>