Multiple Selection Dropdown

• Download source code - 1.57 Kb

Rename file to .asp to run script.

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

%>