How to Limit the option size within 10

Question

this is my current code that i used to display dropdown option.

<select id="NotificationDate" style="display: table-cell; border-radius: 0.3em; color: rgb(0, 0, 0); outline: currentcolor none medium; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 0px; font-size: 13px; font-family: &quot;Lucida Grande&quot;, Tahoma; width: 215px; height: 20px; border: 1px none; background: lightblue none repeat scroll 0% 0%; margin-left: 15px; margin-bottom: 5px;">
  <option value="2020/02/19">2020/02/19</option>
  <option value="2019/10/23">2019/10/23</option>
  <option value="2019/08/14">2019/08/14</option>
  <option value="2019/07/11">2019/07/11</option>
  <option value="2019/06/17">2019/06/17</option>
  <option value="2019/05/16">2019/05/16</option>
  <option value="2019/04/11">2019/04/11</option>
  <option value="2019/03/18">2019/03/18</option>
  <option value="2019/02/11">2019/02/11</option>
  <option value="2019/01/30">2019/01/30</option>
  <option value="2018/12/20">2018/12/20</option>
  <option value="2018/11/19">2018/11/19</option>
  <option value="2018/10/17">2018/10/17</option>
  <option value="2018/09/14">2018/09/14</option>
  <option value="2018/08/14">2018/08/14</option>
  <option value="2018/07/18">2018/07/18</option>
  <option value="2018/06/22">2018/06/22</option>
  <option value="2018/05/14">2018/05/14</option>
  <option value="2018/04/11">2018/04/11</option>
  <option value="2018/03/12">2018/03/12</option>
  <option value="2018/02/19">2018/02/19</option>
  <option value="2018/01/11">2018/01/11</option>
  <option value="2017/12/13">2017/12/13</option>
  <option value="2017/11/14">2017/11/14</option>
  <option value="2017/10/11">2017/10/11</option>
  <option value="2017/09/19">2017/09/19</option>
  <option value="2017/08/14">2017/08/14</option>
  <option value="2017/07/13">2017/07/13</option>
  <option value="2017/06/12">2017/06/12</option>
  <option value="2017/05/11">2017/05/11</option>
  <option value="2017/04/13">2017/04/13</option>
  <option value="2017/03/13">2017/03/13</option>
  <option value="2017/02/15">2017/02/15</option>
  <option value="2017/01/11">2017/01/11</option>
  <option value="2016/12/14">2016/12/14</option>
  <option value="2016/11/11">2016/11/11</option>
  <option value="2016/10/11">2016/10/11</option>
  <option value="2016/09/13">2016/09/13</option>
  <option value="2016/08/11">2016/08/11</option>
  <option value="2016/07/11">2016/07/11</option>
  <option value="2016/06/13">2016/06/13</option>
  <option value="2016/04/11">2016/04/11</option>
  <option value="2016/03/11">2016/03/11</option>
  <option value="2016/02/11">2016/02/11</option>
  <option value="2016/01/11">2016/01/11</option>
  <option value="2015/12/17">2015/12/17</option>
  <option value="2015/11/11">2015/11/11</option>
  <option value="2015/10/12">2015/10/12</option>
  <option value="2015/09/11">2015/09/11</option>
  <option value="2015/08/11">2015/08/11</option>
  <option value="2015/07/14">2015/07/14</option>
  <option value="2015/06/11">2015/06/11</option>
  <option value="2015/05/13">2015/05/13</option>
  <option value="2015/04/13">2015/04/13</option>
  <option value="2015/03/11">2015/03/11</option>
  <option value="2015/02/11">2015/02/11</option>
  <option value="2015/01/12">2015/01/12</option>
  <option value="2014/12/16">2014/12/16</option>
  <option value="2014/12/11">2014/12/11</option>
  <option value="2014/11/11">2014/11/11</option>
  <option value="2014/10/14">2014/10/14</option>
  <option value="2014/09/18">2014/09/18</option>
  <option value="2014/09/15">2014/09/15</option>
  <option value="2014/08/13">2014/08/13</option>
  <option value="2014/07/15">2014/07/15</option>
</select>

you can see in the image,the list is going too long.i want it should display only 10 and remaining should be like scroll and select.

[

Does this answer your question? [How to Set Height for the Drop Down of Select box](https://stackoverflow.com/questions/23534440/how-to-set-height-for-the-drop-down-of-select-box) — Mohammad Faisal, Mar 06 '20 at 05:50
please visit this link your question already answered "https://stackoverflow.com/questions/13362484/max-height-for-select-element-dropdown-option-elements/13362562" — Jadli, Mar 06 '20 at 06:00
`` source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size — John, Mar 06 '20 at 06:03

score 1 · Answer 1 · answered Mar 06 '20 at 05:58

Try this

<div class="container">
  <select  onfocus='this.size=10;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();'>
  <option value="">1 abc</option>
  <option value="">2 abc</option>
  <option value="">3 abc</option>
  <option value="">4 abc</option>
  <option value="">5 abc</option>
  <option value="">6 abc</option>
  <option value="">7 abc</option>
  <option value="">8 abc</option>
  <option value="">9 abc</option>
  <option value="">10 abc</option>
  <option value="">11 abc</option>
  <option value="">12 abc</option>
  <option value="">13 abc</option>
  <option value="">14 abc</option>
  <option value="">15 abc</option>
  <option value="">16 abc</option>
  <option value="">17 abc</option>
  <option value="">18 abc</option>
  <option value="">19 abc</option>
  <option value="">20 abc</option>
</select>
</div>

Thank you so much for you reply it worked me. – prem britz Mar 06 '20 at 06:48 — prem britz, Mar 06 '20 at 06:48
Ok great. You can mark the answer as correct. – YouBee Mar 06 '20 at 06:51 — YouBee, Mar 06 '20 at 06:51

score 0 · Accepted Answer · answered Mar 06 '20 at 05:46

0

Referring to this answer:

<select onfocus='this.size=10;' onblur='this.size=1;' 
        onchange='this.blur();'>
  <option>option a</option>
  <option>option b</option>
  <option>option c</option>
  <option>option d</option>
  <option>option e</option>
  <option>option f</option>
  <option>option g</option>
  <option>option h</option>
  <option>option i</option>
  <option>option j</option>
  <option>option k</option>
  <option>option l</option>
  <option>option m</option>
  <option>option n</option>
  <option>option o</option>
  <option>option p</option>
  <option>option q</option>
  <option>option r</option>
</select>

answered Mar 06 '20 at 05:46

Yosef Tukachinsky

5,570
1
13
29

Can you explain where did it limited to 10? it shows all the list. – Manjuboyz Mar 06 '20 at 06:00
it's show all the options, but no more then 10 at once. for see all you have to scroll. it is the requirements, as I know – Yosef Tukachinsky Mar 06 '20 at 06:03

score 0 · Answer 3 · answered Mar 06 '20 at 05:54

0

push the date variables in an array, iterate through them in a for loop and in the body of the for loop, set the scroll box elements to the last ten of the array from getting size minus 9.

answered Mar 06 '20 at 05:54

score 0 · Answer 4 · answered Mar 06 '20 at 05:55

Try this. It works for me

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

How to Limit the option size within 10

4 Answers4