...

View Full Version : combobox dropdown list height



tehni
11-11-2009, 07: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>
<?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>

SB65
11-11-2009, 09: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.:(

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

SB65
11-12-2009, 08: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">
<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum