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.
<%
dim selChr
selChr = "+"
%>
<SCRIPT LANGUAGE="JavaScript">
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";
}
}
}
multidropdown.notify.options[0].selected = true;
document.multidropdown.notifyReps.value = rep_str;
}
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
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
%>