Multiple Selection Dropdown






3.60/5 (7 votes)
Apr 14, 2004

176128

1814
Multiple selection dropdown.
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
%>