JavaScript: Handling Multiple Selections In A <select> Box
Recently asked on Yahoo! Answers:
I have written the function in asp.net
function chkval(mval)
{
document.getElementById(”TextB… += mval;
}
This is a bit confusing because the questioner is asking about JavaScript but mentions ASP.NET, and because his question was truncated by Yahoo! Answers. However, I gather from this that what he wants is the ability to display, in a textarea, multiple selections from a select.
The issue here is that in JavaScript, there is no native function to provide all the indexes of multiple selections. If you try to call the selectedIndex property on a select box with multiple choices checked off, only the index of the first selected item will be returned.
However, JavaScript will tell us whether an item is selected in a multiple select, if we iterate through all the items in the select. We’ll use that fact to do what the questioner wants.
First, we need to set up the HTML for our demo. We’ll need a form, a multiple select box and a textarea in which to display the results.
<form id="myform" method="post"> <select name="select" size="10" multiple="multiple" id="mylist" onchange="updateTextarea()"> <option value="CHINA">CHINA</option> <option value="INDIA">INDIA</option> <option value="AMERICA">AMERICA</option> <option value="SOUTH AFRICA">SOUTH AFRICA</option> <option value="RUSSIA">RUSSIA</option> <option value="EAST TIMOR">EAST TIMOR</option> <option value="GERMANY">GERMANY</option> <option value="AUSTRALIA">AUSTRALIA</option> <option value="CANADA">CANADA</option> <option value="BRAZIL">BRAZIL</option> </select> <textarea name="textarea" cols="40" rows="10" id="mytext"></textarea> </form>
Notice that we add an onchange event handler to mylist, named updateTextarea(). That will be the JavaScript function we call to update the textarea’s value with whatever is selected.
- We first declare some variables: A simple string output variable; a variable to hold the list; and an array that will hold all the selected items we get from the select box.
- We iterate through the entire select box, asking if each option is selected.
- If an option is selected, we use the push() method to add that item to the array we declared.
- With that done, we use the join() method to convert the array into a string; we use the newline (\n) character to place each selection on its own line in the textarea.
- Finally, we assign the result to the textarea.
function updateTextarea() { var items; var list = document.getElementById("mylist"); var selected = new Array(); for (i = 0; i < list.options.length; i++) { if (list.options[ i ].selected) { selected.push(list.options[ i ].value); } } items = selected.join('\n'); document.getElementById("mytext").value = items; }
And that’s it!
I have prepared demo code, which, as always, is distributed under the Creative Commons Attribution / Share-Alike 2.5 License.
I distribute code under the latest version of the Creative Commons Attribution / Share-Alike License.
A final note: Thanks to Amit Amora and dak for the tip on how to iterate through the multiple select box.
dougv.com | The Web home of Doug Vanderweide » Blog Archive » Populating A List Box From Choices In Another List Box Via AJAX, PHP And MySQL:
[...] the following comment was left on a previous blog entry, JavaScript: Handling Multiple Selections In A SELECT Box: Hi. This Multiple Demo Select is cool. I was actually how I could fill in a list box B, where the [...]
February 24, 2007, 8:32 AM