[原创]可按类别分类选择的select控件（js,asp,html代码）

JS代码：

var classStu=new Array();
var oldforSelect='';
var oldchargerSelect='';
var newAddStu='';
//添加选择
function addItems()
{
    stats=0;
    for(ii=0;ii<document.all.forSelect.options.length;ii++){
        if(document.all.forSelect.options[ii].selected==true){
            arrselect=document.all.forSelect.options[ii].id.split('#');
            if (arrselect[0]!='h')
            {
                classStu[arrselect[0]][arrselect[1]][2]=1;

                if (stats==0||stats==1)
                {
                    stats=1;
                }

                if (newAddStu=='')
                {
                    newAddStu=document.all.forSelect.options[ii].id;
                }
                else
                {
                    newAddStu+=","+document.all.forSelect.options[ii].id;
                }
            }
            else        //添加整班学生
            {
                n=parseInt(arrselect[1]);
                for (kk=1;kk<classStu[n].length;kk++)
                {
                    classStu[n][kk][2]=1;
                }
                stats=2;
            }
        }
    }
    if (stats==1)
    {
        oldchargerSelect=oldforSelect;
        dispcharger();
    }
    else
    {
        SetchargerSelect();
    }
}
//删除选择
function removeItems(){
    stats=0;
    for (kk=0;kk<document.all.charger.options.length;kk++)
    {
        if(document.all.charger.options[kk].selected==true)
        {
            arrselect=document.all.charger.options[kk].id.split('#');
            if (arrselect[0]!='h')
            {
                arrId=document.all.charger.options[kk].id.split("#");
                classStu[arrId[0]][arrId[1]][2]=0;
                if (stats==0||stats==1)
                {
                    stats=1;
                }
            }
            else    //删除整班学生
            {
                n=parseInt(arrselect[1]);
                for (jj=1;jj<classStu[n].length;jj++)
                {
                    classStu[n][jj][2]=0;
                }
                stats=2;
            }
        }
    }

    if (stats==1)
    {
        dispcharger();
    }
    else
    {
        SetchargerSelect();
    }
}
//全选
function selectAll(val,oSelect){
    for(ii=0;ii<oSelect.options.length;ii++){
        arr=oSelect.options[ii].id.split('#');
        if (arr[0]!='h'){
            oSelect.options.item(ii).selected=val;
        }
    }
}
//选定
function locate(){
    StuId_list="";
    StuNum=0;
    for (ii=0;ii<classStu.length;ii++)
    {
        for (jj=1;jj<classStu[ii].length;jj++)
        {
            if (classStu[ii][jj][2]==1)
            {
                StuNum++;
                if (StuId_list=='')
                {
                    StuId_list=classStu[ii][jj][0];
                }
                else
                {
                    StuId_list+=","+classStu[ii][jj][0];
                }
            }
        }
    }
    if(StuNum==0){
        alert("请添加学生!");
        return;
    }

    document.all.Filter.value=StuId_list;
    document.forms("savaStu").submit();
}
//根据所选的班级展开学生列表
function GetforSelect(){
    for(ii=0;ii<document.all.forSelect.options.length;ii++){
        if(document.all.forSelect.options[ii].selected==true){
            arrselect=document.all.forSelect.options[ii].id.split('#');
            //如果当前选择的班级和之前选择的班级一样的话，就恢复默认选择栏（即关闭刚刚展开的学生列表）
            if (arrselect[0]=='h'){
                if (arrselect[1]==oldforSelect){
                    SetforSelect();
                    return;
                }
                document.all.forSelect.innerHTML="";
                for(jj=0;jj<classStu.length;jj++){
                    arrClass=classStu[jj][0].split(',');
                    oOption=document.createElement("option");
                    oOption.text=arrClass[1];
                    oOption.id="h#"+jj+"#"+arrClass[0];
                    //oOption.style.color='#0000FF';
                    document.all.forSelect.options.add(oOption);
                    if (arrClass[0]==arrselect[2]){
                        n=parseInt(arrselect[1]);
                        for (kk=1;kk<classStu[n].length;kk++){
                            oOption=document.createElement("option");
                            oOption.text='  ├'+classStu[n][kk][1];
                            oOption.value=classStu[n][kk][0];
                            oOption.id=n+'#'+kk;
                            document.all.forSelect.options.add(oOption);
                        }
                        oldforSelect=arrselect[1];
                    }
                }
            }else{
                addItems();
            }
            break;
        }
    }
}
//设置学生选择栏为默认值
function SetforSelect(){
    document.all.forSelect.innerHTML="";
    for(ii=0;ii<classStu.length;ii++)
    {
        arrgroup=classStu[ii][0].split(',');
        oOption=document.createElement("option");
        oOption.text=arrgroup[1];
        oOption.id="h#"+ii+"#"+arrgroup[0];
        //oOption.style.color='#0000FF';
        document.all.forSelect.options.add(oOption);
    }
    oldforSelect="";
}

//显示已选学生
function GetchargerSelect(){
    for(ii=0;ii<document.all.charger.options.length;ii++){
        if(document.all.charger.options[ii].selected==true){
            arrselect=document.all.charger.options[ii].id.split('#');
            //如果当前选择的班级和之前选择的班级一样的话，就恢复默认选择栏（即关闭刚刚展开的学生列表）
            if (arrselect[0]=='h'){
                if (arrselect[1]==oldchargerSelect){
                    SetchargerSelect();
                    return;
                }
                document.all.charger.innerHTML="";
                n=parseInt(arrselect[1]);
                for(jj=0;jj<classStu.length;jj++){
                    var StuNum=0;
                    for (jjj=1;jjj<classStu[jj].length;jjj++)
                    {
                        if (classStu[jj][jjj][2]==1)
                        {
                            StuNum+=1;
                        }
                    }
                    if (StuNum>0)
                    {
                        arrClass=classStu[jj][0].split(',');
                        oOption=document.createElement("option");
                        oOption.text=arrClass[1]+"（"+StuNum+"）";
                        oOption.id="h#"+jj+"#"+arrClass[0];
                        //oOption.style.color='#0000FF';
                        document.all.charger.options.add(oOption);
                        if (jj==n){
                            for (kk=1;kk<classStu[n].length;kk++){
                                if (classStu[n][kk][2]==1)
                                {
                                    oOption=document.createElement("option");
                                    oOption.text='  ├'+classStu[n][kk][1];
                                    oOption.value=classStu[n][kk][0];
                                    oOption.id=n+'#'+kk;
                                    document.all.charger.options.add(oOption);
                                }
                            }
                            oldchargerSelect=arrselect[1];
                        }
                    }
                }
            }else{
                removeItems();
            }
            break;
        }
    }
}

//显示已选学生默认值
function SetchargerSelect(){
    document.all.charger.innerHTML='';
    for(ii=0;ii<classStu.length;ii++){
        StuNum=0;
        for (jj=1;jj<classStu[ii].length;jj++)
        {
            if (classStu[ii][jj][2]==1)
            {
                StuNum++;
            }
        }
        if (StuNum>0)
        {
            arrgroup=classStu[ii][0].split(',');
            oOption=document.createElement("option");
            oOption.text=arrgroup[1]+"（"+StuNum+"）";
            oOption.id="h#"+ii+"#"+arrgroup[0];
            //oOption.style.color='#0000FF';
            document.all.charger.options.add(oOption);
        }
    }
    oldchargerSelect="";
}

//展开ID对应的班级学生列表
function dispcharger(){
    document.all.charger.innerHTML="";
    n=parseInt(oldchargerSelect);
    for(jj=0;jj<classStu.length;jj++){
        var StuNum=0;
        for (jjj=1;jjj<classStu[jj].length;jjj++)
        {
            if (classStu[jj][jjj][2]==1)
            {
                StuNum+=1;
            }
        }
        if (StuNum>0)
        {
            arrClass=classStu[jj][0].split(',');
            oOption=document.createElement("option");
            oOption.text=arrClass[1]+"（"+StuNum+"）";
            oOption.id="h#"+jj+"#"+arrClass[0];
            //oOption.style.color='#0000FF';
            document.all.charger.options.add(oOption);
            if (jj==n){
                newStu=newAddStu.split(',');
                newAddStu='';
                for (kk=1;kk<classStu[n].length;kk++){
                    if (classStu[n][kk][2]==1)
                    {
                        oOption=document.createElement("option");
                        oOption.text='  ├'+classStu[n][kk][1];
                        oOption.value=classStu[n][kk][0];
                        oOption.id=n+'#'+kk;
                        for (num=0;num<newStu.length;num++)
                        {
                            if (newStu[num]==oOption.id)
                            {
                                oOption.style.color='#0000FF';
                            }
                        }
                        document.all.charger.options.add(oOption);
                    }
                }
            }
        }
    }
}

ASP代码：

<%
Connect conn                                '建立连接
str="select Class_ID,Class_Name from Code_Class"            '查询班级(分类类别数据）
GetRecordSet conn,rs,str                        '获取记录集"rs"

response.Write("<script language='javascript'>"&vbcrlf)
response.Write("var i=0;"&vbcrlf)
response.Write("var j=1;"&vbcrlf)

do while not rs.eof
    response.Write("classStu[i]=new Array();"&vbcrlf)
    response.Write("classStu[i][j]='"&rs("Class_ID")&","&rs("Class_Name")&"';"&vbcrlf)
     
'查询各分类的详细数据(此为各班的学生列表)=================================

    str="Select Stu_ID,Stu_No,Stu_Name,'0' as state from Student_info where Class_ID="&rs("Class_ID")        '查询未选的学生

    str=str&" union "

    str=str&"Select Stu_ID,Stu_No,Stu_Name,'1' as state from Student_info where Class_ID="&rs("Class_ID")        '查询已选的学生

    str=str&"group by Stu_ID,Stu_No,Stu_Name "
    str=str&"order by Stu_No"
     
'查询各分类的详细数据结束=================================

    GetRecordSet conn,rsStu,str            '得到记录集
 
    do while not rsStu.eof
        response.Write("j+=1;"&vbcrlf)

        response.Write("classStu[i][j]=new Array();"&vbcrlf)
        response.Write("classStu[i][j][0]='"&rsStu("Stu_Id")&"';"&vbcrlf)    '学生ID
        response.Write("classStu[i][j][1]='"&rsStu("Stu_Name")&"';"&vbcrlf)    '学生名字
        response.Write("classStu[i][j][2]="&rsStu("state")&";"&vbcrlf)            '状态位：0为未选，1为已选

        rsStu.MoveNext
    loop
    rsStu.close
    rs.MoveNext
    response.Write("i+=1;"&vbcrlf)
    response.Write("j=0;"&vbcrlf)
Loop
response.Write("</script>"&vbcrlf)
CloseRs rs
CloseRs rsStu
CloseConn conn
%>

HTLM代码：

<table width="100%" style="font-size:9pt;color:#000034">
    <tr>
        <td>
            待选学生
            <br>
            <select name="forSelect" multiple style="height:230;width:200;color:#000034" 

onDblClick="GetforSelect()">
            </select>
            全选/全不选<input type="checkbox" onclick="selectAll(this.checked,document.all.forSelect)">
        </td>
        <td>
            <input type="button" value=" 增加 " onclick="addItems()">
            <br>
            <input type="button" value=" 删除 " onclick="removeItems()">
            <br>
            <input type="button" value=" 选定 " onclick="locate()">
        </td>
        <td>
            已选学生
            <br>
            <select name="charger" multiple style="height:230;width:200;color:#000034" 

onDblClick="GetchargerSelect()">
            </select>
            全选/全不选<input type="checkbox" onclick="selectAll(this.checked,document.all.charger)">
        </td>
    </tr>
</table>
<form action="SaveNewStu.asp" method="post" name="savaStu">
<input type="hidden" name="Filter"><!--保存选定的学生列表-->
</form>
<script language="javascript">
    SetforSelect();                //显示待选学生列表
    SetchargerSelect();            //显示已选学生列表
</script>