Line size of a drop box down when we click on the "down" button

Asked

Viewed 175 times

7

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

When I click to choose the state, 20 lines(states) appear and overtake my text box down.

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

html html-select

  • It’s a good question, but I don’t think you can control it. The only way would be not to use <select>, and yes some substitute made with HTML + CSS + Javascript.

  • It’s been a while without updating, but it’s quite unobtrusive ms-Dropdown, {demo}, note that if you start typing the dropdown does the search, a bit like the top left menu here of the site.

  • 10 lines means you want to display only the first 10 states? If so, what if the user is from a state that is not being displayed? You have the screen image or more details to add in the question?

  • You can control this at the time of listing, if you are doing this for a JS, if it doesn’t get complicated, you would have to use some of the tips acimas.

  • You want the top 10 in the box and the rest is in the scroll bar? if it’s not that then you just put only the 10 option’s even

2 answers

1

Understood that in the < select> we’ll have 20 < option> and by clicking 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 left as an option if you use the scroll bar

Obs: If it is to have only 10 elements as choice then simply put only the 10 elements as < option> it’s not even! :)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onfocus='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>

When der Focus then it will get size=10, when losing the Focus will p/1 and change also that would be the case of the user selecting a

https://stackoverflow.com/a/23534569/3130590

0

According to that answer, you can increase the size when necessary and maintain the standard behavior when it is not necessary.

<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>

Browser other questions tagged html html-select

You are not signed in. Login or sign up in order to post.