If you would like to have a multiple select dropdown and want to use the selection in a specified format, then here is the solution. Sometimes you may need to create a query string value or fill in a textbox or textarea with the selected values. Say for example you have a dropdown list where you can select multiple items. Upon selecting each option you want to fill in a textarea with the selected value.
Example:
HTML Part:
<form method=POST name='testing'>
<select name='testsel' multiple onchange='showselection()'>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<textarea id="txtEditions"></textarea>
</form>
Javascript Part:
<script language='javascript'>
function showselection()
{
var frm = document.testing
var opt = frm.testsel
var numofoptions = opt.length
var selValue = new Array
var j = 0
for (i=0; i<numofoptions; i++)
{
if (opt[i].selected === true)
{
selValue[j] = opt[i].value
j++
}
}
selValue = selValue.join("+")
document.getElementById("txtEditions").innerHTML = selValue
}
</script>
![[del.icio.us]](http://ehsan.bdwebwork.com/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://ehsan.bdwebwork.com/wp-content/plugins/bookmarkify/digg.png)
![[Facebook]](http://ehsan.bdwebwork.com/wp-content/plugins/bookmarkify/facebook.png)
![[Feed Me Links]](http://ehsan.bdwebwork.com/wp-content/plugins/bookmarkify/feedmelinks.png)
![[Google]](http://ehsan.bdwebwork.com/wp-content/plugins/bookmarkify/google.png)
![[LinkedIn]](http://ehsan.bdwebwork.com/wp-content/plugins/bookmarkify/linkedin.png)
![[StumbleUpon]](http://ehsan.bdwebwork.com/wp-content/plugins/bookmarkify/stumbleupon.png)
![[Technorati]](http://ehsan.bdwebwork.com/wp-content/plugins/bookmarkify/technorati.png)
![[Twitter]](http://ehsan.bdwebwork.com/wp-content/plugins/bookmarkify/twitter.png)
Nice works !!! It would be cool more if i could also delete items from that list.
I spent weeks searching for a way around the accessibility issues with drop down multiple selects for database entry. Finally, I adapted your code, using the textarea box to collect the dropdown multiple selected items, and then collected the items (using the textarea as an invisible input) and submitted to the database. Works better than all of the options I had. (Of coarse, I had to change database to TEXT instead of SET, which is easier, and I still maintain content control.)
Is there a way to use multiple showselection() functions for multiple tables on the same page? When I use onChange=”showselection()” on more than one table, it only allows one to work.
You may want to pass reference of the table to showselection() as a parameter and get that working.
For example, you have two tables, table1 and table2. When you call showselection() you pass the table name/id, showselection(tableName) and use it in the function.
Thank you.
it was fantastic and also solved all my problems.
nice work !
Thanks Ehsanual for such well written code. I’ve been looking for a population script but many had limitations. Yours was easy to implement and customize.
I’m very delighted to see the reaction. Hope I will find some time to contribute more.
Thank-you very much for this! I had been struggling for ages to get the selected items in a multiple drop-down menu and this did just the job
This is super-cool, most simple and yet most effective …….
You’re welcome Katy, glad that it served your purpose.
Techna, thx for your nice words
It works great with an input form, thanks
Is there a way to make it work with a menu named like this
<select name="States_served[]_” multiple=”multiple” onchange=’showselection()’>
great work man. Thank you for providing this valuable information
Thank’s alot.
you’re welcome! glad to know it helped you.