HTML Select multiple as dropdown

Question

I would like to use a select field with multiple as a common dropdown field with size 1    lt select name  test    size  1  multiple gt       lt option gt 123      lt option gt 456      lt option gt 789  lt  select gt    Why doesn t this code show the arrow for the dropdown   Thanks

User · Answer

It s quite unpractical to make multiple select with size 1  think about it  I made a fiddle here  https   jsfiddle net wqd0yd5m 2    lt select name  test  multiple gt       lt option gt 123 lt  option gt       lt option gt 456 lt  option gt       lt option gt 789 lt  option gt   lt  select gt    Try to explore other options such as using checkboxes to achieve your goal

User · Answer

You probably need to some plugin like Jquery multiselect dropdown  Here is a demo   Also you need to close your option tags like this    lt select name  test  multiple gt       lt option gt 123 lt  option gt       lt option gt 456 lt  option gt       lt option gt 789 lt  option gt   lt  select gt    JSFIDDLE DEMO

User · Answer

Because you re using multiple  Despite it still technically being a dropdown  it doesn t look or act like a standard dropdown  Rather  it populates a list box and lets them select multiple options   Size determines how many options appear before they have to click down or up to see the other options   I have a feeling what you want to achieve is only going to be possible with a JavaScript plugin   Some examples    jQuery multiselect drop down menu  http   labs abeautifulsite net archived jquery-multiSelect demo

User · Answer

lt select name  select box   multiple gt           lt option gt 123 lt  option gt           lt option gt 456 lt  option gt           lt option gt 789 lt  option gt        lt  select gt

User · Answer

Here is the documentation of  lt select gt   You are using 2 attributes   multiple  This Boolean attribute indicates that multiple options can be selected in the list  If it is not specified  then only one option can be selected at a time  When multiple is specified  most browsers will show a scrolling list box instead of a single line dropdown    size  If the control is presented as a scrolling list box  e g  when multiple is specified   this attribute represents the number of rows in the list that should be visible at one time  Browsers are not required to present a select element as a scrolled list box  The default value is 0   As described in the docs   lt select size  quot 1 quot  multiple gt  will render a List box only 1 line visible and a scrollbar  So you are loosing the dropdown arrow with the multiple attribute

User · Answer

A similar question was asked here  If you re able to add an external library to your project  you can try Chosen  Here s a sample    x000D   x000D      chosen-select   chosen   x000D    no results text   Oops  nothing found   x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdn rawgit com harvesthq chosen gh-pages chosen jquery min js  gt  lt  script gt  x000D   lt link href  https   cdn rawgit com harvesthq chosen gh-pages chosen min css  rel  stylesheet   gt  x000D   x000D   lt form action  http   httpbin org post  method  post  gt  x000D     lt select data-placeholder  Begin typing a name to filter     multiple class  chosen-select  name  test  gt  x000D       lt option value    gt  lt  option gt  x000D       lt option gt American Black Bear lt  option gt  x000D       lt option gt Asiatic Black Bear lt  option gt  x000D       lt option gt Brown Bear lt  option gt  x000D       lt option gt Giant Panda lt  option gt  x000D       lt option gt Sloth Bear lt  option gt  x000D       lt option gt Sun Bear lt  option gt  x000D       lt option gt Polar Bear lt  option gt  x000D       lt option gt Spectacled Bear lt  option gt  x000D     lt  select gt  x000D     lt input type  submit  gt  x000D   lt  form gt  x000D   x000D   x000D    One thing I ve run into  you have to include JQuery BEFORE you include Chosen or you ll get errors

[html] HTML: Select multiple as dropdown

Examples related to html

Examples related to drop-down-menu