471,599 Members | 1,309 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,599 software developers and data experts.

How to increase the number of items showin in a <select> dropdown box?

I have created a drop down box, which works fine, i want to increase the number of rows it shows without having to scroll, how do i do this though?

<td><select name="itjobtypeid" style="font: 10pt Tahoma" >
<option value=0 >Select IT Requests Type</option>
do {
<option value="<?php echo $rowitjobtype['itjobtypeid']?>"><?php echo $rowitjobtype['jobtype']?></option>
} while ($rowitjobtype = mysql_fetch_assoc($resultitjobtype));
$totalRowsitjobtype = mysql_num_rows($resultitjobtype);
if($totalRowsitjobtype > 0) {
mysql_data_seek($resultitjobtype, 0);
$rowitjobtype = mysql_fetch_assoc($resultitjobtype);
Nov 7 '07 #1
8 3745
5,058 Expert 4TB
Hi Jason.

I've moved this question over to the HTML/CSS forums, where you are more likely to get an answer.

I've also changed the thread title to better describe it's contents.
Please try giving your threads descriptive titles. This helps the experts find threads they can help with and increases your chances of getting an answer.
Check out the Posting Guidelines for tips on how to create good thread titles.

Nov 9 '07 #2
7,435 Expert 4TB
This cannot be done.
Nov 9 '07 #3
5,058 Expert 4TB
This cannot be done.
This is what I suspected.

The only thing I know that comes close is the 'size' property of the <select> tag, which will change it into a list-box, rather than a drop-down box.
Nov 9 '07 #4
Variations of these work for me depending on the specifics that you want:
onclick="size='45';" onmouseover="" onkeydown="size='60';" onfocus="" onmousedown="size='26';" onmouseout="size='1';" onmouseup="size='1';" onkeyup="size='1';" onchange="size='1';" onblur="size='1';"

Let us know what you run with.
Nov 26 '11 #5
638 512MB
hi try this code ,
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. .my.options{
  8.     overflow:auto;
  9.     height:auto;
  10.     background:#000;
  11. }
  12. </style>
  13. <script type="text/javascript">
  14.  function height($){
  15.         $.size=$.options.length;
  16.     }
  17.     function closed($){
  18.         $.size=1;
  19.     }
  20.     function switcher($){
  21.         if($.size>1){
  22.             $.size='0';
  23.             document.body.focus();
  24.         }else{
  25.             height($);
  26.         }
  27.     }
  28. </script>
  29. </head>
  31. <body>
  32. <table>
  33. <tr>
  34.     <td>
  35. <select name="itjobtypeid" class="my" onfocus="height(this);" onchange="switcher(this);">
  36. <option value=0 >Select IT Requests Type</option>
  37. <option value="1">1</option>
  38. <option value="2">2</option>
  39. <option value="2">3</option>
  40. <option value="2">4</option>
  41. <option value="2">5</option>
  42. <option value="2">6</option>
  43. <option value="2">7</option>
  44. <option value="1">1</option>
  45. <option value="2">2</option>
  46. <option value="2">3</option>
  47. <option value="2">4</option>
  48. <option value="2">5</option>
  49. <option value="2">6</option>
  50. <option value="2">7</option>
  51. <option value="1">1</option>
  52. <option value="2">2</option>
  53. <option value="2">3</option>
  54. <option value="2">4</option>
  55. <option value="2">5</option>
  56. <option value="2">6</option>
  57. <option value="2">7</option>
  58. <option value="1">1</option>
  59. <option value="2">2</option>
  60. <option value="2">3</option>
  61. <option value="2">4</option>
  62. <option value="2">5</option>
  63. <option value="2">6</option>
  64. <option value="2">7</option>
  65. <option value="1">1</option>
  66. <option value="2">2</option>
  67. <option value="2">3</option>
  68. <option value="2">4</option>
  69. <option value="2">5</option>
  70. <option value="2">6</option>
  71. <option value="2">7</option>
  72. </select></td>
  73. </tr>
  74. </table>
  75. </body>
  76. </html>
Dec 2 '11 #6
That's really cool, however it only works once, then goes back to the default dropdown. Its not obvious to me what needs tickling up to make it get the proper height again.
Dec 2 '11 #7
638 512MB
no its because you are just watching it in a blank page without any other field in side the form and the if you notice that the function height() is called onfocus and the focus is not lost until you click any other element or anywher inside the page , if you do it will work back to back and when you are inside a form with multiple inputs it wont happen there , but anyhow we can still improve it
Omer Aslam
Dec 2 '11 #8
I want to thank you for your effort here Omer, I think this is a key usability requirement that is seldom considered. In the moment that one is searching for something generally the only need at that time is to see the data prospects (an exception is where one needs to visually copy the text that cannot be readily clipboarded, e.g. from an image). The eye and brain scans what can be seen quicker than any scrolling can ever achieve. Typically there is circa one or two million pixels in front of the person at the moment of that search, yet designers everywhere unwittingly say I am going to torture you with a little glimpse of what I have here for you - and I am going to make you work your fingers to get what you want. This is probably more important for NLP types who are visually dominant. Any interface not implementing this principle is not optimally usable. One of my pet farthings worth. Thank you for your contribution here.

I'll do some more testing, an obvious test is what happens when the number of rows exceeds the control / screen height?
Dec 2 '11 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by i_dvlp | last post: by
5 posts views Thread by Isha | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.