HTML Drop Down List with Multiple Selections

Posted on 2012-09-04
Last Modified: 2013-07-30
I am trying to create a drop down list that will allow to select more than one option.

Using the code below creates a list but that can only be scrolled down with the arrow keys and it not obvious if you don't know. Also I need the selected values to be return as follows

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


and not


Is there any easy way of accomplishing this without using complex code from ASP or Java?
Question by:broccolini
    1 Comment
    LVL 42

    Accepted Solution

    You can only have the dropdown if you don't set it to multiple. If you set it to multiple, then the dropdown disappear and you box will be a set number of rows deep. The reason you can only use the arrows is because you have the size set to 1.

    Also, to return all the selected values you need to name your <select> as an array. You can then loop through the selected items in your handler script.

    <select size="3" name="Test[]" multiple>

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Live - One-on-One JavaScript Help from Top Experts

    Solve your toughest problems, fast.
    JavaScript experts are online now and ready to help you.

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now