Limiting number of options displayed by a php populated dropdown menu

Question

I have a drop-down menu as following:

   <select onchange="random_function()" id='choice' >
      <option selected="selected" >
         Make a choice
      </option>
  </select>

I populate it through a php request inside the <select> tag as following:

<?php
    include 'config.php';
    $query = $pdo->query('
                SELECT choices
                FROM allTheChoices'   
    );
    while ($row = $query->fetch()){
       echo "<option>".$row['choices']."</option>";
    }
?>

For the moment, my database is uncomplete and I have only 2 options to display but there will be plenty in the future (100+).

My goal is to find a way to let the select only show 10 options and it should display a scroll bar to see all the remaining options.

I already tried using <select size="10"> but the design of the dropdown is completely changed and awful. Do you have a simple way to do this without altering the design?

https://stackoverflow.com/questions/8788245/how-can-i-limit-the-visible-options-in-an-html-select-dropdown — Steve0, Jun 29 '17 at 15:49

apaillarse · Accepted Answer · 2017-06-30T11:59:04.983

1

Used this bit of code to achieve what I wanted :

 <select  style="position:absolute;" onmousedown="if(this.options.length>8)
{this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;" >

Make sure to use the following to avoid container div to expand when choosing an option :

style="position:absolute;"

and edit the following code with the number of choices you want to display (10 is used in this example) :

onmousedown="if(this.options.length>10){this.size=10;}"

So the whole html code I used is :

  <select  style="position:absolute;" onmousedown="if(this.options.length>8)
    {this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;" >
          <option selected="selected" >
             Make a choice
          </option>
  </select>

edited Jun 30 '17 at 11:59

answered Jun 30 '17 at 07:34

apaillarse

85
1
1
9

1

Please try to avoid just dumping code as an answer and try to explain what it does and why. Your code might not be obvious for people who do not have the relevant coding experience. Please edit your answer to include [clarification, context and try to mention any limitations, assumptions or simplifications in your answer.](https://stackoverflow.com/help/how-to-answer) – Frits Jun 30 '17 at 10:26
@Frits I hope it fits your requirements now – apaillarse Jun 30 '17 at 11:59
Yes, much better! – Frits Jun 30 '17 at 12:00

pacificpelican · Answer 2 · 2017-06-29T18:20:37.037

0

Try using a limit in your SQL statement, like this: "LIMIT 10".

So this is how the code might look:

<?php
include 'config.php';
$query = $pdo->query('
            SELECT choices
            FROM allTheChoices
            LIMIT 10' 
);
while ($row = $query->fetch()){
   echo "<option>".$row['choices']."</option>";
} ?>

edited Jun 29 '17 at 18:20

answered Jun 29 '17 at 17:16

pacificpelican

363
1
7

The problem of this solution is that it will only display 10 choices, not the remaining ones. – apaillarse Jun 30 '17 at 07:24
Well, you're not very clear about what you want. Also you used the word 'him' to refer to a drop-down menu. Do you know that English has a neuter gender for objects? – pacificpelican Jun 30 '17 at 16:24

Limiting number of options displayed by a php populated dropdown menu

2 Answers2