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

ASP
ASP正则表达式技巧
ASP Access实现网站计数器(访问量)
ASP新闻分页,将一篇过长的文章分页,生成静态页面
一些关于asp 购物车的想法
一个sql查询器,自动画表格填字段
ASP实现文件直接下载的代码
把网页中的(电话,qq等数字)生成图片的ASP程序
asp长文章用分页符来分页显示
Asp函数介紹(37个常用函数)
ASP中的面向对象类
分页实现方法的性能比较
asp ajax跨域提交数据
asp修改文件和文件夹的名字的代码
ASP 多关键词查询实例代码
asp被杀毒软件误删的解决方法
asp 多关键词搜索的简单实现方法
asp 根据IP地址自动判断转向分站的代码
asp dictionary对象的用法
ASP 千万级数据分页的存储过程
ASP隐藏真实文件的下载功能实现代码

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 41 ::
收藏到网摘: 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>