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>

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>

• php
• javascript
• drop-down-menu
• user-experience

Share Improve this question Follow edited Apr 24, 2012 at 19:09 user1260310 asked Apr 24, 2012 at 17:00 user1260310user1260310 2,2371010 gold badges4949 silver badges6767 bronze badges 1

• (Very) similar to stackoverflow./questions/4753407/… – RustyTheBoyRobot Commented Jul 5, 2012 at 20:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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>

See size attribute.

<select multiple="multiple" size="1">