现在的位置: 首页 > 综合 > 正文

纯ajax式,多用户选择示例

2013年11月22日 ⁄ 综合 ⁄ 共 3931字 ⁄ 字号 小 中 大 ⁄ 评论关闭
目标:从服务器端取各部门的列表,在客户端选择,界面效果如下:

 

从下拉列表中选择部门后,从服务器取得部门下的用户,文件名:getUsers.asp ,

<%
Response.Buffer = True 
Response.ExpiresAbsolute = Now() - 1 
Response.Expires = 0 
Response.CacheControl = "no-cache" 
Response.AddHeader "Pragma", "No-Cache"

dim objMailManager 
set objMailManager = new mailManager
deptNo = saferequest("deptNo")
objMailManager.OpenDB()
arrUsers =objMailManager.getUserForSelect(deptno)
for i=0 to ubound(arrUsers,2)
    Response.Write( "<option value="&chr(34) & arrUsers(0,i) &chr(34) & "> " &escape( trim(arrUsers(1,i))) & " </option>"   )
next 


objMailManager.CloseDB()
set objMailManager=nothing
%>

以下是服务端返回

<option value="2"> %u6210%u90FD%u5F69%u5DE5 </option><option value="3"> %u6210%u90FD%u9648%u5DE5 </option>

%后为中文被javascript的escape函数处理的效果,必须这样escape处理,要不会乱码,

客户端代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>用户选择</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="../manage/css/css.css" rel="stylesheet" type="text/css">
<link href="../manage/css/main.css" rel="stylesheet" type="text/css">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>
<%
Response.Buffer = True 
Response.ExpiresAbsolute = Now() - 1 
Response.Expires = 0 
Response.CacheControl = "no-cache" 
Response.AddHeader "Pragma", "No-Cache"

dim objMailManager 
set objMailManager = new mailManager
objMailManager.OpenDB()
%>
<BODY >
<script language="JavaScript">
    var xmlHttp; 
    function changeDept(deptNo) {

        var url = "getUsers.asp?deptNo="+deptNo;
        if (window.ActiveXObject) { 
              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        }
        xmlHttp.onreadystatechange = showUsers;
        xmlHttp.open("post", url, true);
        xmlHttp.send(null);
     }
     
    function showUsers() {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") 
        {    
            var strxml= unescape(xmlHttp.responseText) ;
            document.getElementById("allUsers").innerHTML = "<select name=select size=15  id=sourceSelect style=font-size:12px ; font-family:Arial, Helvetica, sans-serif; width:96%; ondblclick=javascript:seleOne(this.selectedIndex);>"+strxml+"</select> ";
        }
    }
</script>

<script language="javascript" type="text/javascript">
<!--
    //var k=window.dialogArguments; 
    //var selectnode;
    //获得父窗口传递来的值 
    //if(k!=null) 
    // { 
    //    selectnode = k.document.getElementById("Addressee").value; 
    // } 
     
    //设置返回到父窗口的值 
    function retSelected(){
        
        var descSelect = document.getElementById("descSelect");
        var a,b
        a="";
        b="";
        for (var i = 0; i < descSelect.length; i++){
                
            
                a += descSelect(i).value  + ",";
                b += descSelect(i).text + ",";
            
            
        }
        a=a.substring(0,a.length-1)
        b=b.substring(0,b.length-1)
        var s = new Array(a,b); 
        window.returnValue=s; 
        window.close(); 
    } 
    
    function unselectAll()
    {
        var coll = document.getElementById("descSelect");
        lngOpts =  coll.options.length;
        if (coll!=null) {
                 for (i=0; i<lngOpts; i++){
                    coll.options.remove(0) ;
                }
        }
    }
    
    function seleOne(lngSelIndex){
            if (lngSelIndex>-1){
                
                var sourceSelect = document.getElementById("sourceSelect");
                var descSelect = document.getElementById("descSelect");
                if (!checkSelect(sourceSelect(lngSelIndex))){
                    var oOption = document.createElement("OPTION");
                        oOption.value=sourceSelect(lngSelIndex).value;
                        oOption.text=sourceSelect(lngSelIndex).text;
                        descSelect.options.add(oOption);
                }
            }
            
    }
    function removeOne(lngSelIndex){
返回
【上篇】