下拉框两级连动

时间:2021-11-08 09:13:54

我这个也是在网上看到的二级连动。个人认为挺不错的。

只要将下面代码修改一下就可以使用的。

<!--大类的下拉列表框,它的onChange事件执行ShowSubType函数显示子类项-->
<select name="TypeID" id="TypeID" onChange="JavaScript:ShowSubType(this.options[this.selectedIndex].tag)">
<option value="">选择大类</option>
    <%
     Dim RecordCount,BTypeArr
     Rs.Open "Select TypeName,TypeID from BType",Conn,1,1   '查询大类表,获取大类名和ID
     RecordCount=Rs.RecordCount
     If RecordCount>0 Then
      '定义一个数组,用来存放子类名
      Redim BTypeArr(RecordCount-1)
      For i=0 To RecordCount-1
  '查询每个大类所包含的小类名及小类的ID号
       SqlStr="Select SubTypeID,SubTypeName From SubType Where TypeID=" & Rs("TypeID")
       Rs1.Open SqlStr,Conn
       'BTypeArr(i)="<option value=''>选择小类</option>"
       While Not Rs1.Eof
  '小类名及小类的ID号按下拉列表框的数据格式连接并放入数组
        BTypeArr(i)=BTypeArr(i) & "<option value='" & Rs1("SubTypeID") & "'>" & Rs1("SubTypeName") & "</option>"
        Rs1.MoveNext
       Wend
       Rs1.Close
    %>
    <!--大类列表写入下拉列表框-->
    <option value="<%=Rs("TypeID")%>" tag=<%=i%>><%=Rs("TypeName")%></option>
    <%
       Rs.MoveNext
      Next
     End If
     Rs.Close
    %>
     </select>
    
     <select name="SubTypeID">
                <option value="">选择小类</option>
     </select>

<!--生成脚本控制子类的动态改变-->
<%If RecordCount>0 Then%>
<script language="JavaScript">
//JavaScript中定义数组
var BTypeArr=new Array();
<%
  '将子类的数据写入数组
  For i=0 To RecordCount-1
%>
   BTypeArr[<%=i%>]="<%=BTypeArr(i)%>";
<%
  Next
%>
<!--改变大类时显示子类的脚本函数-->
function ShowSubType(Index)
{
  document.frmSearch.SubTypeID.outerHTML="<select name='SubTypeID'><option value=''>选择小类</option>" + BTypeArr[Index] + "</select>";
}
</script>
<%End If%>