怎样实现两个DropDownList互联

    今天需要写一个两个DropDownList互联的程序。捣鼓了半天,总算实现出来了,另外,也对Javascript中的对象属性没有提示,帮助少,莫名奇妙的错误深恨之。
    
        程序是用ASP+Javascript实现的,ASP代码可以嵌套在Javascript的作用域中,如下所示:
   
<script language="javascript">
  
<%
     dim conn,rs
     conn
="MyConn";
     rs
="MyRs";
  
%>
var Conn = <%=conn%> //这种实现是可以的
</script>


        实现双DropDownList互联需要借助Javascript中的数组实现,先定义数组,这里只是固定的写了几个数组,一般情况下,可根据需要用asp代码来实现:
       
<script language="javascript">
var onecount = 6;
var subcat    =    new Array();
subcat[
0= new Array("8","信息发布平台","1","今日焦点");
subcat[
1= new Array("8","信息发布平台","2","专题播报");
subcat[
2= new Array("8","信息发布平台","3","业界动态");
subcat[
3= new Array("16","产品发布平台","4","产业信息");
subcat[
4= new Array("16","产品发布平台","5","视觉商城");
subcat[
5= new Array("19","会议论坛","6","会议主题");
</script>

    Html页面上有两个DropDownList,在代码中我是用ASP来动态增加实现的,在这里为了表达清晰,就真接写出option选项,如下所示:
<select name="FClassSelect" onChange="changelocation(document.form2.FClassSelect.options[document.form2.FClassSelect.selectedIndex].value)">
<option value='8'>信息发布平台</option>
<option value='16'>产品发布平台</option>
<option value='17'>会展服务平台</option>
<option value='19'>会议论坛</option>
</select>

<select name="FClass_Select2" id="DropDownField2">
</select>

        可以看出,第二个DropDownList是没有option的,是根据FClassSelect的选择来往DropDownField2中添加option,在FClassSelect的OnChange事件中,有下个changelocation函数,它就是往DropDownField2中添加相应的option。
        函数的实现:
function changelocation(SClass_Id)
{
    var optionlength=document.form2.FClass_Select2.options.length;
    for(i=0;i
<optionlength;i++)
        document.form2.FClass_Select2.remove(0); //不能用remove(i),因为删掉一个之后,后一个Index自动变成0
    
    for(i
=0;i<onecount;i++)
    
{
        if(subcat[i][0]
==SClass_Id)
        
{
            var newOpt
=window.document.createElement("option");
            
newOpt.text=subcat[i][3];
            
newOpt.value=subcat[i][2];
               
window.document.form2.FClass_Select2.options.add(newOpt);
        }
    }
}

        OK,这样就实现了在两个DropDownList之间的互联,但是还是有一个问题 ,就是页面刚载入的时候,第二个DropDownList是绝对不会有任何选项的,必须要第一个DropDownlist中点另外一个,再点回来,才能显示出与它关联的选项。这个办法也好解决,只要在第二个DropDownList的HTML后面调用一次changelocation即可,如下:

<select name="FClass_Select2" id="DropDownField2">
</select>

    <script language="javascript">
    changelocation(subcat[0][0]);
   </script>




下面是我项目中的程序:
<script language="javascript">
<%
    
dim conn2,rs2
    
call OpenConnRS(conn2,rs2)
    rs2.open 
"SELECT * from FClass,SClass where FClass.FClass_ID=SClass.SClass_FClass_ID",conn2,1,1
%
>
var onecount 
= <%=rs2.recordcount%>;
var subcat    
=    new Array();
<%
    count
=0
    
do while not rs2.eof
%
>
subcat[
<%=count%>= new Array("<%=trim(rs2("FClass_ID"))%>","<%=trim(rs2("FClass_Title"))%>","<%=trim(rs2("SClass_ID"))%>","<%=trim(rs2("SClass_Title"))%>");
<%
    count
=count+1
    rs2.movenext
    
loop
    rs2.close
    conn2.close
%
>


function changelocation(SClass_Id)
{
    var optionlength    
=    document.form2.FClass_Select2.options.length;
    
for(i=0;i<optionlength;i++)
        document.form2.FClass_Select2.remove(
0);
    
    
for(i=0;i<onecount;i++)
    {
        
if(subcat[i][0]==SClass_Id)
        {
            var newOpt
=window.document.createElement("option");
            newOpt.text
=subcat[i][3];
            newOpt.value
=subcat[i][2];
               window.document.form2.FClass_Select2.options.add(newOpt);
        }
    }
}
</script>


<select name="FClassSelect" onChange="changelocation(document.form2.FClassSelect.options[document.form2.FClassSelect.selectedIndex].value)">
          
<%
              rs.open 
"Select * from FClass",conn,1,1
            
for i=1 to rs.recordcount
                Response.Write(
"<option value='"&rs("FClass_Id")&"'>"&rs("FClass_Title")&"</option>")
                rs.movenext
            
next
            rs.close()
          %
>
          
</select>
            
<select name="FClass_Select2" id="FClass_Select2" >
            
</select>
            
<script language="javascript">
                changelocation(subcat[
0][0]);
            
</script>
posted @ 2005-07-01 16:07  shipfi  阅读(779)  评论(0编辑  收藏