Click here to Skip to main content
Click here to Skip to main content

Multiple Selection Dropdown

By , 23 Apr 2004
Rate this:
Please Sign up or sign in to vote.

Rename file to .asp to run script.

Sample screenshot

Introduction

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.

Problem:

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 = "+"
%>
<SCRIPT LANGUAGE="JavaScript">
// 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);
  else 
   return document.getElementById(objectId);
 }
</script>
<%

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" 
       onchange="notifySelect(this.options[this.selectedIndex].text);">
   <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
   %>
   </SELECT>
   <INPUT TYPE="Submit" name="action" value="Submit">
</form>
<%

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

%>

License

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

About the Author

BrianLaF
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, vb.net, asp.net.
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? Pinmembertborg12312322-Sep-05 13:33 
AnswerRe: Using the CTRL key instead? [modified] PinmemberBrianLaF24-Sep-05 15:31 
GeneralASP.Net Version Pinmemberremarius10-May-04 9:12 
Generalwell not that great.. Pinmembernapodano15-Apr-04 0:16 
GeneralRe: well not that great.. Pinmemberjsanjosem23-Apr-04 4:28 
GeneralRe: well not that great.. PinmemberBrianLaF24-Apr-04 16:27 
GeneralGreat article PinmemberDaniel Stephen Rule14-Apr-04 17:06 
GeneralRe: Great article PinmemberMr.Prakash24-Apr-04 5:25 
GeneralRe: Great article PinmemberBrianLaF24-Apr-04 16:42 
GeneralRe: Great article PinmemberMr.Prakash24-Apr-04 16:53 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 24 Apr 2004
Article Copyright 2004 by BrianLaF
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid