Rows down from a drop box down when we click the "down" button

Question

Rows down from a drop box down when we click the "down" button

Navigation

#1 by (1 votes)
#2 by (0 votes)

7

I have a list of Brazilian states created with the command select/option of HTML5,

When I click to choose the state, 20 lines appear (states) and goes beyond my textbox down.

I want to restrict the number of lines / states that appear after clicking to choose. I do not want to use size="x" and yes I want 10 lines to appear when I click the button to choose the state.

html html-select

asked by anonymous 07.10.2014 / 03:26

2 answers

"Search refused" in the Register.br How to write programs that support internationalization using cmake?

score 1 · Answer 1

Understood that select > we will have 20 < option and clicking on the select open a box for the user to choose an option.

The option box will open with a size that accommodates the first 10 elements
The other elements will be the option of choice if you use the scroll bar

Note: If you are going to have only 10 elements as your choice, then just just option > is not really! :)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectonfocus='this.size=10;'onblur='this.size=1;'onchange='this.size=1;this.blur();'><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option></select>

Whenyougivefocusthenitwillhavesize=10,whenlosingthefocusgoesp/1andchangealsothatwouldbethecaseoftheuserselectinga

link

score 0 · Answer 2

According to this answer , you can increase size when needed and maintain default behavior when you do not need it.

<select name="select1" onmousedown="if(this.options.length>10){this.size=1;}"  onchange='this.size=0;' onblur="this.size=0;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>