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

来源：互联网发布：铁三角ckb50 知乎编辑：程序博客网时间：2024/05/16 19:56

在设计数据库查询页面时，下拉菜单是经常使用的元素。很多时候你会希望选择了下拉菜单的一项后，相应的另一下拉菜单的内容会随之改变。这种功能可以通过刷新页面来实现，但界面显得不那么友好。在本文介绍例子中，不需要刷新页面便可达到目的。当在下拉菜单中选择了一个省份后，另一下拉菜单会出现该省份的一些城市供选择。我的基本思路是：在客户端脚本中，把下拉菜单可能会出现的所有内容预先存放于数组中，以后根据需要从数组中抽取数据写入下拉菜单中。以下是完整的代码：

<HTML><HEAD><TITLE>动态改变下拉菜单内容示例</TITLE></HEAD><SCRIPT LANGUAGE=JavaScript></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>