当前位置: 首页 > 图文教程 > 网络编程 > ASP > 不刷新页面改变下拉菜单内容

ASP
asp实现取得数组中的最大值的代码
asp 将日期格式化为需要的格式
asp 下产生任意位数随机密码的代码
asp下返回以千分位显示数字格式化的数值
asp重定向页面的方法总结
asp下去除数组中重复的项的方法
asp下实现 重新排序数字数组的代码
asp 验证输入网址是否有效并可以访问 与正则验证输入网址
asp验证Ip格式的函数
asp实现生成由数字,大写字母,小写字母指定位数的随机数
asp 格式化sql中的like字符串
asp 实现显示所有的服务器变量值的函数
asp 取得用户真实IP,对代理地址仍然有效的函数
asp 通用数据库连接过程函数
asp 字符串截取函数
asp下实现格式化文件大小以MB显示的函数
asp 下用正则表达式检测邮箱格式的函数
asp 实现检测字符串是否为纯字母和数字组合的函数
asp代码实现检测组件是否安装的函数
asp通过JMAIL实现通用发送函数

ASP 中的 不刷新页面改变下拉菜单内容


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 63 ::
收藏到网摘: n/a

  在设计数据库查询页面时,下拉菜单是经常使用的元素。很多时候你会希望选择了下拉菜单的一项后,相应的另一下拉菜单的内容会随之改变。这种功能可以通过刷新页面来实现,但界面显得不那么友好。在本文介绍例子中,不需要刷新页面便可达到目的。当在下拉菜单中选择了一个省份后,另一下拉菜单会出现该省份的一些城市供选择。我的基本思路是:在客户端脚本中,把下拉菜单可能会出现的所有内容预先存放于数组中,以后根据需要从数组中抽取数据写入下拉菜单中。以下是完整的代码:
<HTML>
<HEAD>
<TITLE>动态改变下拉菜单内容示例</TITLE>
</HEAD>
<SCRIPT LANGUAGE=JavaScript>
<!--
//定义一个二维数组aArray,用于存放城市名称。
var aCity=new Array();
aCity[0]=new Array();
aCity[1]=new Array();
aCity[2]=new Array();
aCity[3]=new Array();
//赋值,每个省份的城市存放于数组的一行。
aCity[0][0]="--请选择--"
aCity[1][0]="--请选择--"
aCity[1][1]="广州市";
aCity[1][2]="深圳市";
aCity[1][3]="珠海市";
aCity[1][4]="汕头市";
aCity[1][5]="佛山市";
aCity[2][0]="--请选择--"
aCity[2][1]="长沙市";
aCity[2][2]="株州市";
aCity[2][3]="湘潭市";
aCity[3][0]="--请选择--"
aCity[3][1]="杭州市";
aCity[3][2]="苏州市";
aCity[3][3]="温州市";
function ChangeCity()      
{var i,iProvinceIndex;
iProvinceIndex=document.frm.optProvince.selectedIndex
iCityCount=0;
while (aCity[iProvinceIndex][iCityCount]!=null) iCityCount++;//计算选定省份的城市个数
document.frm.optCity.length=iCityCount;//改变下拉菜单的选项数
for (i=0;i<=iCityCount-1;i++)//改变下拉菜单的内容
    document.frm.optCity[i]=new Option(aCity[iProvinceIndex][i]);
document.frm.optCity.focus()
}
-->
</SCRIPT>
<BODY ONFOCUS=ChangeCity()>
<H3>选择你所在的省份及城市</H3>
<FORM NAME="frm">
  <P>省份:
    <SELECT NAME="optProvince" SIZE="1" ONCHANGE=ChangeCity()>
      <OPTION>--请选择--</OPTION>
      <OPTION>广东省</OPTION>
      <OPTION>湖南省</OPTION>
      <OPTION>浙江省</OPTION>
    </SELECT>
  </P>
  <P>城市:
    <SELECT NAME="optCity" SIZE="1">
      <OPTION>--请选择--</OPTION>
    </SELECT>
  </P>
</FORM>
</BODY>
</HTML>