Hi all,
i want to know how can we select more than one option from a select box like given below:
Colors Black White Tan Navy Royal Blue Red Yellow Hunter(Dark Green) Kelly(Green) Burgundy
Thanks
+11
A:
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>
nickohrn
2009-02-07 19:59:21
I guess that is the more literal answer :)
nickohrn
2009-02-07 20:02:50
+1
A:
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?
le dorfier
2009-02-07 20:04:53
Here you go: http://www.ryancramer.com/journal/entries/select_multiple/
Wayne Khan
2009-02-07 20:13:25
Wayne, if that had been an actual answer rather than a comment, I would have upvoted. Good link.
Chuck
2009-02-07 20:21:03
+1
A:
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.
farzad
2009-02-07 20:11:21
A:
Hi,
I've had this same problem, and the guys at htmlforums managed to come up with a way.
Heres the forum link:
http://www.htmlforums.com/client-side-scripting/t-select-multiple-items-without-ctrl-117760.html
And heres the answer: (i havn'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>
I hope this helps.
Thanks,
Matthew Millar