二级下拉列表的实现

简介: 二级下拉列表的实现      有[group]和[user]二个数据表,要求从这两个表中读出数据,并表现为二级下拉表,当选择[group]列表中的选项时,[user]列表中的选项相应改变。 [group]表对应的数据集为rsGroup,有如下字段:lngID_Group, strName_Gro...

二级下拉列表的实现     

有[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>
 

目录
相关文章
|
9月前
|
Android开发
ExpandInfoAdapter实现二级列表显示转
ExpandInfoAdapter实现二级列表显示转
32 1
|
缓存 JavaScript
同一个页面设置不同的路由名称
同一个页面设置不同的路由名称
79 0
|
小程序 JavaScript 数据库
小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
232 0
|
前端开发
二级导航栏
简介:本文通过HTML与CSS相集合的方式,来实现二级导航菜单。 CSS渲染 最后的结果展示:
112 0
二级导航栏
标签页+标签编辑页
标签页+标签编辑页
131 0
|
JavaScript
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
456 0
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
|
前端开发
HTMl+CSS制作二级菜单或二级导航栏
 二级菜单的实现思路为: 1.在默认状态下,使用display:none;将二级菜单隐藏。  2.当一级菜单中的列表标签li获取焦点(hover)后,使用display:blick;将二级菜单显示出来。  3.使用position: relative;和position: absolute;分别得一级菜单和二级菜单设置相对定位和绝对定位。
1326 0
HTMl+CSS制作二级菜单或二级导航栏
|
网络协议 SEO
|
前端开发 JavaScript
二级下拉菜单
看似简单的一个菜单,确需要不少的知识点。 1. getByClass  getElementsByClassName 已经有大部分现代浏览器支持了,只有ie6,ie7,ie8是不支持的。所以对ie6,7,8做特别的处理就行,而ie里边有个内置的属性一直被我们所忽略,document.all,这个比一般的document.getElementsByTagName('*')或许要快一点。
985 0

热门文章

最新文章