Click here to Skip to main content
15,445,316 members
Articles / Programming Languages / Javascript
Posted 13 Apr 2004


26 bookmarked

Multiple Selection Dropdown

Rate me:
Please Sign up or sign in to vote.
3.60/5 (7 votes)
23 Apr 2004
Multiple selection dropdown.

Rename file to .asp to run script.

Sample screenshot


This code shows how to do a basic multiple selection dropdown on a webpage, using ASP and JavaScript. I couldn't find anything like this on the web, so I hope it comes in handy.

I didn't want to lose real estate on my form when selecting multiple items in a dropdown.


The standard HTML dropdown changes to a listbox once the multiple attribute is added to the dropdown select element.

This code uses the standard dropdown but the selection is handled by the JavaScript. A hidden value must be assigned in the form to pass the values selected in the dropdown. The selected items are highlighted, and a plus sign (+) is added to the front of the item in the dropdown showing it has been selected.

The return string is printed after clicking Submit, to show what data is passed from the page.

'''This code demos how to generate a multi-selection dropdown in JavaScript and ASP
'''Feel free to modify it for your needs - it saved me alot of space on my form
'''Problem:  Adding "multiple" to a dropdown switches 
'''the control to a listbox instead of a dropdown.
'''Solution:  Create a multi-selection dropdown using code
'''It can easily be modifed to work with a database 
'''but arrays were used for this demo
'''Thanks to jsanjosem for the modifications to make it work with mozilla
'''Tested on IE6 and Mozilla 1.7b
'''Happy programming!  Brian LaForce
'''Programmer level = Intermediate

''' set the ASP special char here to flag a selected value in dropdown
dim selChr
selChr = "+"
// set the javascript special char here to flag selected value in dropdown
var selChr = "+";
function notifySelect(RepSelected){
 var multidropdown = getObject("multidropdown");
 if (RepSelected == "click to view reps") return false;
 var rep_str ="";
 for (i = 0; i < multidropdown.notify.options.length; i++) {
   if (multidropdown.notify.options[i].value != '') {
   var dropdownItem = multidropdown.notify.options[i].text;
   if (dropdownItem == RepSelected || dropdownItem == selChr+RepSelected) {
   if (dropdownItem.substring(0,1) == selChr) {
    if (confirm("Remove " + RepSelected.substring(1) _
                       + " from Past Due notification?")) {
     document.multidropdown.notify.options[i].text = RepSelected.substring(1);
    else {
    if (confirm("Add " + RepSelected + " to Past Due notification?")) { 
     document.multidropdown.notify.options[i].text = selChr + RepSelected;
   dropdownItem = multidropdown.notify.options[i].text;
      if (dropdownItem.substring(0,1) == selChr) {
    rep_str = rep_str + multidropdown.notify.options[i].value + ",";
   multidropdown.notify.options[i].style.backgroundColor = "#3366CC";
   multidropdown.notify.options[i].style.color = "#FFFFFF";
   else {
    multidropdown.notify.options[i].style.backgroundColor = "#FFFFFF";
   multidropdown.notify.options[i].style.color = "#000000";
 //end of search
 multidropdown.notify.options[0].selected = true;
 document.multidropdown.notifyReps.value = rep_str;  

//needed for mozilla compatibility
 function getObject(objectId) {
  if (document.all && !document.getElementById) 
   return document.all(objectId);
   return document.getElementById(objectId);

dim i, in_out, stylecolor
dim strReps, strRepIDs, strSelectedRepIDs
dim arrayReps, arrayRepIDs

'populate test data - this usually comes from a database
strReps = "Jim,Pete,Fred,Jane,Brian"
strRepIDs = "1,2,3,4,5"
strSelectedRepIDs = "0,0,0,0,0"

arrayReps = split(strReps,",")
arrayRepIDs = split(strRepIDs,",")

action = Request("action")

If action = "Submit" Then
 strSelectedRepIDs = request("notifyReps")
End If

<form name="multidropdown" id="multidropdown" method="post">
<input type=hidden name="notifyReps" value="<% = notifyReps %>">

   <SELECT NAME="notify" id="notify" 
   <OPTION VALUE="0" selected>click to view reps</OPTION>
  For i = 0 to uBound(arrayReps)
   in_out = ""
   stylecolor = "style='color:black;backgroundColor:white'"
   If instr(strSelectedRepIDs, arrayRepIDs(i)) > 0 Then
    in_out = selChr
    stylecolor = "style='color:white;background-color:#3366CC'"
   End If %>
   <OPTION VALUE="<% = arrayRepIDs(i) %>" <%=stylecolor%>>
   <%=in_out%><% = arrayReps(i) %></OPTION>
  <% next
   <INPUT TYPE="Submit" name="action" value="Submit">

If action = "Submit" Then
 response.write "<br><br> Rep values returned: " & request("notifyReps")
End If



This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Written By
Web Developer
United States United States
Started programming in Business Basic in the 1980's and acquired my AS in Computer Science at that time. Promoted to IS Manager after one year of programming (sink or swim).
Self taught in SMC Basic, Visual Basic, C Shell, perl, ASP, JavaScript,,
Now working as a Network Administrator at a hospital in Northern California.
Fell into a webmaster role when implementing the company's intranet website to support documentation.

Comments and Discussions

QuestionUsing the CTRL key instead? Pin
trondborg_x22-Sep-05 13:33
Membertrondborg_x22-Sep-05 13:33 
AnswerRe: Using the CTRL key instead? [modified] Pin
BrianLaF24-Sep-05 15:31
MemberBrianLaF24-Sep-05 15:31 
GeneralASP.Net Version Pin
remarius10-May-04 9:12
Memberremarius10-May-04 9:12 
Generalwell not that great.. Pin
napodano15-Apr-04 0:16
Membernapodano15-Apr-04 0:16 
GeneralRe: well not that great.. Pin
jsanjosembet.es23-Apr-04 4:28
Memberjsanjosembet.es23-Apr-04 4:28 
GeneralRe: well not that great.. Pin
BrianLaF24-Apr-04 16:27
MemberBrianLaF24-Apr-04 16:27 
GeneralGreat article Pin
dzzxyz14-Apr-04 17:06
Memberdzzxyz14-Apr-04 17:06 
GeneralRe: Great article Pin
Prakash Nadar24-Apr-04 5:25
MemberPrakash Nadar24-Apr-04 5:25 
GeneralRe: Great article Pin
BrianLaF24-Apr-04 16:42
MemberBrianLaF24-Apr-04 16:42 
GeneralRe: Great article Pin
Prakash Nadar24-Apr-04 16:53
MemberPrakash Nadar24-Apr-04 16:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.