Select Drop Down differs when use size attribute

Question

I used size attribute here to limit the list:

<div class="select-editable"> 
  <select size="3"> 
    <option value="115x175 mm">115x175 mm</option> 
    <option value="120x160 mm">120x160 mm</option> 
    <option value="120x287 mm">120x287 mm</option> 
    <option value="115x175 mm">115x175 mm</option> 
    <option value="120x160 mm">120x160 mm</option> 
    <option value="120x287 mm">120x287 mm</option> 
  </select>
</div>

But i want drop down like this visible under the select element.

<div class="select-editable"> 
  <select> 
    <option value="115x175 mm">115x175 mm</option> 
    <option value="120x160 mm">120x160 mm</option> 
    <option value="120x287 mm">120x287 mm</option> 
    <option value="115x175 mm">115x175 mm</option> 
    <option value="120x160 mm">120x160 mm</option> 
    <option value="120x287 mm">120x287 mm</option> 
  </select>
</div>

Can you show us your code? (A [snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) will be the best) Are you using some plugin or something? — Mosh Feu, Aug 02 '16 at 10:33
i want select option editable so i used nextElementSibling ,and now i wanted limit the list options , so i used size attribute , the options starts from top of select element ,i want options under . please help me — cool rock, Aug 02 '16 at 10:43
I understand.. but you spring code compile to html. The browser doesn't "understand" spring right? — Mosh Feu, Aug 02 '16 at 15:09
in first code i used size attribute ,that is not i wanted , see the second code i didn't use size but i want the drop down like the second code with limited list in the dropdown, if they is any alternative to size , will be nice . — cool rock, Aug 02 '16 at 15:30
`with limited list` if you will create only 3 `option` in the select, it will only 3 options in the dropdown. I don't need to limit it. — Mosh Feu, Aug 02 '16 at 15:33
for your understanding i gave you the sample code in html, but it dynamically fetch list from database , it will be 10 to 15 options in the dropdown so i want to limit the dropdown . — cool rock, Aug 02 '16 at 16:18
`limit` mean that you don't want that all of the 15 options will be shown? — Mosh Feu, Aug 02 '16 at 17:04
sir please help , i need drop down like in pic 2 , with limited options — cool rock, Aug 03 '16 at 06:07
Do you mean something like this? http://jsbin.com/notiyuq/edit?html,css,output — Mosh Feu, Aug 03 '16 at 07:30
yes but i want scroll bar for remaining options , only 3 options visible remain options with scrollbar . i hope you understand now — cool rock, Aug 03 '16 at 07:41
Now I understood! You want to show by default only 3 options and the rest in the scolled area. Well, you can't do this with native `select` you can only do this with a plugin. Is that OK? — Mosh Feu, Aug 03 '16 at 08:06
Ok no problem but i want dropdown like in the pic 2 with scrollbar, please help me sir — cool rock, Aug 03 '16 at 09:39
There is one option to do so ,it's size =3 but it behaves differently, why so ??? — cool rock, Aug 03 '16 at 09:47
https://stackoverflow.com/questions/53504832/how-to-get-single-element-from-multiple-element-with-same-id ,please give me solution — cool rock, Nov 28 '18 at 07:34

Mosh Feu · Accepted Answer · 2016-08-03T14:06:13.683

0

You can use a plugin such as jquery-ui selectmenu. With a this plugin you can customize your combo with css including limit the height of the options box.

Demo: (Keep attention to the height I defined in the css)

$( "#speed" ).selectmenu();

.ui-selectmenu-menu .ui-menu {
  height: 74px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<select name="speed" id="speed">
  <option>Slower</option>
  <option>Slow</option>
  <option selected="selected">Medium</option>
  <option>Fast</option>
  <option>Faster</option>
</select>

http://output.jsbin.com/biqaka

Update

Bootstrap demo: (In bootstrap-select you have size property)

$('.selectpicker').selectpicker({
  style: 'btn-info',
  size: 3
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>option</option>
  <option>option</option>
  <option>option</option>
  <option>option</option>
  <option>option</option>
  <option>option</option>
  <option>option</option>
  <option>option</option>
  <option>option</option>
</select>

edited Aug 03 '16 at 14:06

answered Aug 03 '16 at 09:55

Mosh Feu

28,354
16
88
135

this is want i wanted but i have own dropdown design ,i dont want this line , how to make it work without this line . – cool rock Aug 03 '16 at 11:45
what this line of code does here – cool rock Aug 03 '16 at 11:56
@coolrock It's a reference of jquery-ui design. You can easily override the design. See my update.. (It's just an example how to change the design). Also, there are a lot of plugins you can use. Are you using bootstrap or something? – Mosh Feu Aug 03 '16 at 12:38
Thanks a lot sir but this want i wanted , we can do this in another way , we don't need jQuery here,(class="form-control" data-size="3") is enough , but i have problem in integrating to my project , – cool rock Aug 04 '16 at 08:01
Thanks a lot sir but this want i wanted , we can do this in another way , we don't need jQuery here,(class="form-control" data-size="3") is enough , but i have problem in integrating to my project , – cool rock Aug 04 '16 at 08:03
what is the problem? – Mosh Feu Aug 04 '16 at 08:20
(http://jsbin.com/yumanimefa/edit?html,css,output) ,here my sample project , how to use selectpicker with this code but my design shouldn't change anything , please help me – cool rock Aug 04 '16 at 08:25
Thanks a lot sir , it really help me . – cool rock Aug 04 '16 at 09:03
I glad to hear. Please [accept](http://stackoverflow.com/help/someone-answers) the answer so it will help to other people (I can [upvote](http://meta.stackexchange.com/a/173400/303669) too :)) – Mosh Feu Aug 04 '16 at 09:25
sir i question elm.parentNode.nextElementSibling.value = elm.value; ,why parentNode used here . why cant we use elm.nextElementSibling.value – cool rock Aug 04 '16 at 13:54
Ex: parent A have b and c child ,so b is sibling of c , why parentNode.nextElementSibling is used here – cool rock Aug 04 '16 at 14:03
Because the plugin wrap the `select` with `div` so the `nextElementSibling` returns nothing. The `input` is sibling of the parent. – Mosh Feu Aug 04 '16 at 14:10
sir again i small problem ,please see following video , why input appear separate ,https://www.youtube.com/watch?v=IZrlUtok2hM&feature=youtu.be – cool rock Aug 05 '16 at 06:57
It's happening because the plugin init after the document already displayed. The simple solution is to hide the hole document and display it when it finish to load. http://stackoverflow.com/questions/22095529/hiding-everything-until-the-page-has-finished-loading – Mosh Feu Aug 05 '16 at 10:40
yes you are right sir , another question ,i had named select element id="selectSubBox" before without plugin i attached options at run time like this $("#selectSubBox").html(options); , now how to attach to wrapped element . – cool rock Aug 05 '16 at 10:57
Try to use ´selectpicker('refresh')´ to refresh the plugin. Read in the docs. https://silviomoreto.github.io/bootstrap-select/methods/ – Mosh Feu Aug 05 '16 at 16:09
yes , now it works , could you suggest me any book to learn scripting languages ,really i struggle in scripting . – cool rock Aug 05 '16 at 17:41
hello , photo preview is not working in IE11 , here is the code works fine in chrome,firefox , http://jsbin.com/hofusomiko/1/edit?html,css,js,output – cool rock Aug 06 '16 at 10:58
Actually, I don't know a book. All of my resources come from the internet and newsletters. About your second comment, please ask a new question and post the link here I will try to help. Also, please accept the answer so it will help to other people. Good luck.. – Mosh Feu Aug 06 '16 at 18:12
http://stackoverflow.com/questions/38807048/photo-preview-is-not-working-in-ie?noredirect=1#comment64983810_38807048 ,photo preview is not working in IE11 , – cool rock Aug 07 '16 at 08:15
https://stackoverflow.com/questions/53504832/how-to-get-single-element-from-multiple-element-with-same-id , please give me solution – cool rock Nov 28 '18 at 07:34

Select Drop Down differs when use size attribute

1 Answers1