i want to know how can we select more than one option from a select box like given below:

<label for="color">Colors</label>
<select class="inputbox" name="color" id="color" style="width:180px;">
    <option value="Black">Black</option>
    <option value="White">White</option>
    <option value="Tan">Tan</option>
    <option value="Navy">Navy</option>
    <option value="RoyalBlue">Royal Blue</option>
    <option value="Red">Red</option>
    <option value="Yellow">Yellow</option>
    <option value="Hunter(DarkGreen)">Hunter(Dark Green)</option>
    <option value="Kelly(Green)">Kelly(Green)</option>
    <option value="Burgundy">Burgundy</option>
 </select>

Thanks

i want to know how can we select more than one option from a select box like given below:

<label for="color">Colors</label>
<select class="inputbox" name="color" id="color" style="width:180px;">
    <option value="Black">Black</option>
    <option value="White">White</option>
    <option value="Tan">Tan</option>
    <option value="Navy">Navy</option>
    <option value="RoyalBlue">Royal Blue</option>
    <option value="Red">Red</option>
    <option value="Yellow">Yellow</option>
    <option value="Hunter(DarkGreen)">Hunter(Dark Green)</option>
    <option value="Kelly(Green)">Kelly(Green)</option>
    <option value="Burgundy">Burgundy</option>
 </select>

Thanks

• php
• javascript
• html
• css

• 1 Why vote down the question? If you don't have an answer, just don't answer, or post a comment, but don't just vote it down for no reason. It's a legitimate question. Upvoted to 0. – Christian Nunciato Commented Feb 7, 2009 at 22:21

7 Answers 7

All you have to do is use the multiple attribute on the select box.

<select name="some-select" id="some-select" multiple="multiple">
    <option>Black</option>
    <option>White</option>
    <option>Other</option>
</select>

Ordinarily an HTML form will allow you to Ctrl-Click multiple options from a combo box, if you use the "multiple" option in the tag.You can also use "Shift-Click" for a range of values.

But the interesting question is how can you implement this so that more than 10% (estimated) of users can figure out how to use it?

inorder to use multiple values for a named parameter in $_GET/$_POST/$_REQUEST arrays in PHP, you have to name your form field like this:

name="myFieldName[]";

by puting the braces at the end of the name of the field, PHP will be able to store multiple values for that paramter. if you are using multiple checkboxes, or multiple selects, you should name your fields like this. and don't forget the values for HTML option tags.

in your case, the HTML should be like this:

<select name="some-select[]" id="some-select" multiple="multiple">
<option value="balck">Black</option>
<option value="white">White</option>
<option value="other">Other</option>
</select>

your PHP code that is the action of the form can have the data like this.

$mySelectValues = $_REQUEST['some-select'];
// mySelectValues is an array now
foreach ($mySelectValues as $selected) {
    echo $selected;
}

when you are viewing your HTML page, you can select multiple options by holding the Ctrl key and then selecting other options.

I was late here but will try post my answer. may not be the best.

Add multiple attribute to the select and change name="color" to an array like name="color[]"

<label for="color">Colors</label>
<select class="inputbox" name="color[]" id="color" style="width:180px;" multiple>
    <option value="Black">Black</option>
    <option value="White">White</option>
    <option value="Tan">Tan</option>
    <option value="Navy">Navy</option>
    <option value="RoyalBlue">Royal Blue</option>
    <option value="Red">Red</option>
    <option value="Yellow">Yellow</option>
    <option value="Hunter(DarkGreen)">Hunter(Dark Green)</option>
    <option value="Kelly(Green)">Kelly(Green)</option>
    <option value="Burgundy">Burgundy</option>
 </select>

and php could do something like this

foreach ($_POST['color'] as $selectedColor)
echo $selectedColor."\n";
//and this echos a comma separated string
$colorString=implode(",", $_POST['color']);
echo $colorString;

How to select multiple items? CTRL+Click the Options.

I've had this same problem, and the guys at htmlforums managed to come up with a way.

Here's the forum link:

http://www.htmlforums.com/client-side-scripting/t-select-multiple-items-without-ctrl-117760.html

And here's the answer: (I haven't had time to adapt it to your code, sorry)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select Test</title>
    
        <meta name="keywords" content="" />
        <meta name="description" content="" />
    
        <script type="text/javascript">
    
            // Variables we need
            var previous    = new Array();
            var lastClicked = '';
    
            // We are going to attach event listeners, no code at the bottom or anything hard coded...
            function addEvent(obj, evType, fn)
            { 
                if(obj.addEventListener)
                {
                    obj.addEventListener(evType, fn, false);
                    return true;
                }
                else if(obj.attachEvent)
                {
                    var r = obj.attachEvent('on' + evType, fn);
                    return r;
                }
                else
                {
                    return false; 
                } 
            }
    
            // Let's begin when the DOM is ready
            addEvent(window, 'load', begin);
    
            // Attach the handlers to our selects
            function begin()
            {
                addSelect('numbers');
                addSelect('sm');
                addSelect('sm2');
            }
    
            // We add a couple of handlers to each
            function addSelect(id)
            {
                var sel = document.getElementById(id);
                addEvent(sel, 'click', whichElement);
                addEvent(sel, 'click', addRemoveClicked);
            }
    
            // Find which element we are looking at on this click
            function whichElement(e)
            {
                if(!e)
                {
                    var e = window.event;
                }
    
                if(e.target)
                {
                    lastClicked = e.target;
                }
                else if(e.srcElement)
                {
                    lastClicked = e.srcElement;
                }
    
                if(lastClicked.nodeType == 3) // Safari bug
                {
                    lastClicked = lastClicked.parentNode;
                }
            }
    
            // Make sure we are displaying the correct items
            function addRemoveClicked(e)
            {
                if(!previous[this.id])
                {
                    previous[this.id] = new Array();
                }
    
                // Remember what has been used
                if(previous[this.id][lastClicked.value] == 1)
                {
                    previous[this.id][lastClicked.value] = 0;
                }
                else
                {
                    previous[this.id][lastClicked.value] = 1;
                }
    
                var selectBox = document.getElementById(this.id);
    
                // Add correct highlighting
                for(var i = 0; i < selectBox.options.length; i++)
                {
                    selectBox.options[i].selected = '';
                    
                    if(previous[this.id][selectBox.options[i].value] == 1)
                    {
                        selectBox.options[i].selected = 'selected';
                    }
                }
            }
        </script>
    </head>
    
    <body>
        <form name="selectTest" action="">
    
            <select name="numbers" id="numbers" multiple="multiple" size="6"> 
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
                <option value="4">Four</option>
                <option value="5">Five</option>
            </select>
    
            <select name="sm" id="sm" multiple="multiple" size="6">
                <option value="a">To make</option>
                <option value="b">Multiple</option>
                <option value="c">Selections</option>
                <option value="d">Just Click</option>
                <option value="e">With The</option>
                <option value="f">Mouse</option>
            </select>
    
            <select name="sm2" id="sm2" multiple="multiple" size="6">
                <option>Everything</option>
                <option>Is</option>
                <option>Possible</option>
                <option>Until</option>
                <option>Proven</option>
                <option>Otherwise</option>
            </select>
    
        </form>
    </body>
    </html>

You missed the behavior of the different devices were you will open the select div: As suggested to you, add the multiple boolean that lets the browser know that more than one option can be chosen, now, if you are using the browser on your laptop or computer, you must use "Shift + click" or "Ctrl + click" for selecting more than one option, if you open it on your mobile, then it behaves as expected by default.

<label for="color">Colors</label>
<select class="inputbox" name="color" id="color" multiple>
    <option value="Black">Black</option>
    <option value="White">White</option>
    <option value="Tan">Tan</option>
    <option value="Navy">Navy</option>
    <option value="RoyalBlue">Royal Blue</option>
    <option value="Red">Red</option>
    <option value="Yellow">Yellow</option>
    <option value="Hunter(DarkGreen)">Hunter(Dark Green)</option>
    <option value="Kelly(Green)">Kelly(Green)</option>
    <option value="Burgundy">Burgundy</option>
 </select>