JavaScript与Jsp构造二级连动无刷新下拉框

补(2005-10-25)整理

 

本文不借助Ajax技术,使用单存的JavaScript+Jsp+DHTML来实现

 

数据库表关键字段 ID SuperID  关系

页面中以双Select来读出数据,实现动态连动

 

<script language="javascript">

   var i_count=0;

   subItem=new Array();   //存放二级项

  <%

        int subcount=xx;     //得到二级项的记录数

        String subId=xxx;    //ID

        String superId=xxx;  //上级ID

        String subName=xxx;  //二级项名称

        for(int i=0;i<subcount;i++){

   %>  

           //用javascript数组来记录

           subItem[<%=i%>]=new Array("<%=subName%>","<%=superId%>","<%=subId%>");

   <%

         }

   %>

     i_count=<%=subcount%>;

   

    function changelocation(OID){  //动态改变子列表

        document.all.selsub.length=0;

        var OID=OID;

        var i;

        document.all.selsub.options[0]=new Option("请选择","");

        for(i=0;i< i_count;i++){   //遍历所有二级项

           if(subItem[i][1]==OID){  //如果二级项的SuperID匹配OID

                document.all.selsub.options[document.all.selsub.length]=new Option(subItem[i][0],subItem[i][2]); //构造子项

           }

        }

    }

   

</script>

 

HTML代码:

<select id="sel" οnchange="changelocation(document.all.sel.options[document.all.sel.selectedIndex].value)"

<option value="" selected>选择一级项</option>

<%

    //利用for循环输出一级项

    jsp代码.......(略)

%>

</select>

 

<!-- 子项列表 -->

<select id="selsub">

    <option value="" selected>选择子项</option>

</select>

 

主要技术点:

(1)得到当前选中项的value

document.all.select控件Id(或name).options[document.all.select控件Id.selectedIndex].value

 

(2)动态加入Select中的项

document.all.select控件Id(或name).options[document.all.select控件Id(或name).length]=new Option("项的Text值","项的Value值")