5

does anyone know a way to create a dropdown list as in a select statement that allows multiple selections but can display on one line. Adding the multiple="multiple" option causes it to display on as many lines as there are options which is not suitable for this project's layout Css and/or javascript would be fine however, hoping to avoid js frameworks. Thinking something with onclick event to show the standard multi-line dropdown box might work but not sure how to implement.

Following displays on several lines.

 <select name="items[ ]" multiple="multiple">
    <option value="item1">item1</option>
     <option value="item2">item2</option>
    <option value="item2">item2</option></select>
user1260310
  • 2,229
  • 9
  • 49
  • 67

2 Answers2

3

I suggest to use select2 which gives you an easy possibility to create such a select-box you need. Example from that page fitting your needs:

$(".js-example-basic-multiple").select2();

<select class="js-example-basic-multiple" multiple="multiple">
    <option value="AL">Alabama</option>
    ...
    <option value="WY">Wyoming</option>
</select>
Fuzzyma
  • 7,619
  • 6
  • 28
  • 60
  • While the op wanted to avoid using js frameworks, this is still the best answer. No sense in reinventing the wheel. – zgr024 Jun 19 '15 at 12:46
-1

See size attribute.

<select multiple="multiple" size="1">
simshaun
  • 21,263
  • 1
  • 57
  • 73
  • When you set size=1, you lose access to the other options, ie you can only see the first one. – user1260310 Apr 24 '12 at 20:04
  • 1
    I mis-understood what you were asking then. Check out https://github.com/ehynds/jquery-ui-multiselect-widget – simshaun Apr 24 '12 at 20:10
  • 2
    -1 as this simply doesn't work. I suggest editing your answer to suggest the jquery option instead of just leaving it in a comment. – devios1 Nov 30 '12 at 23:24