[原创]二级下拉列表的实现

〖张偶 2004年9月〗

有[group]和[user]二个数据表，要求从这两个表中读出数据，并表现为二级下拉表，当选择[group]列表中的选项时，[user]列表中的选项相应改变。

[group]表对应的数据集为rsgroup，有如下字段：lngid_group, strname_group
[user]表对应的数据集为rsuser，有如下字段：lngid_user, lnggroupid, strname_user

思路：先建立group 和user 的下拉列表；分别读入 rsgroup 和 rsuser 的数据；再建立change_select() 函数，当group 的下拉列表被改变时，执行该函数对 user 下拉列表进行更新。

代码如下：
<!— group 的下拉列表-------------->
<select name="sltgroupid"
onchange="javascript:change_select(this.options[this.selectedindex].value)">
<option value="0">用户组……</option>
<%
for i = 1 to rsgroup.recordcount
 response.write "<option value='" & lngid_group & "'>" & strname_group & "</option>"
 rsgroup.movenext
next
%>
</select>

<!— user 的下拉列表-------------->
<select name="sltuserid">
<option value="0">用户……</option>
</select>

<script language = "javascript">
//读入 rsuser的数据
arrselect=new array();
arrselect[0] = new array("用户……",0,0)
<%
for i = 1 to rsuser.recordcount
%>
arrselect[<%= i %>]=new array("<%= strname_user %>","<%= lnggroupid %>","<%= lngid_user %>");
<%
 rsuser.movenext
next
%>

//更新 user 下拉列表的函数
function change_select(selvalue) 
{
 document.all.sltuserid.length=0; 
 var i;
 for(i=0;i<arrselect.length;i++)
 {
  if(arrselect[i][1]==selvalue)
  {
   var newoption=new option(arrselect[i][0],arrselect[i][2]);
   document.all.sltuserid.add(newoption);
  }
 }
}
</script>

运行结果如下：
<!— group 的下拉列表-------------->
<select name="sltgroupid"
onchange="change_select(this.options[this.selectedindex].value)">
<option selected value="0">用户组……</option>
<option value='1'>直属机构</option>
<option value='2'>办事处</option>
<option value='3'>技术部</option>
</select>

<!— user 的下拉列表-------------->
<select name="sltuserid">
<option selected value="0">用户……</option>
</select>

<script language = "javascript">
//读入 rsuser的数据
arrselect=new array();
arrselect[0]=new array("用户……",0,0)
arrselect[1]=new array("总经办","1","1");
arrselect[2]=new array("网络中心","1","15");
arrselect[3]=new array("公共平台","1","4");
arrselect[4]=new array("售后部","1","20");
arrselect[5]=new array("广州","2","24");
arrselect[6]=new array("上海","2","23");
arrselect[7]=new array("售前支持","3","8");
arrselect[8]=new array("研发中心","3","9");

//更新 user 下拉列表的函数
function change_select(selvalue) 
{
//同上，略。
}
</script>