多选下拉列表

• 下载源代码 - 1.57 Kb

将文件重命名为 .asp 以运行脚本。

引言

这段代码展示了如何在网页上使用 ASP 和 JavaScript 实现一个基本的多个选择下拉框。我在网上找不到类似的东西，希望对您有所帮助。

我不想在选择下拉框中的多个项目时占用表单上的过多空间。

问题

当向下拉框 select 元素添加 multiple 属性时，标准的 HTML 下拉框会变为列表框。

这段代码使用标准的下拉框，但选择由 JavaScript 处理。必须在表单中分配一个隐藏值来传递下拉框中选择的值。选定的项目会被突出显示，并且在下拉框中的项目前面会添加一个加号 (+) 以表明它已被选中。

单击提交后，会打印返回字符串，以显示从页面传递的数据。

<%
'''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

%>