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

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

时间： 2024-08-03 10:22:48

不刷新页面改变下拉菜单内容的相关文章

ajax+php无刷新二级联动下拉菜单(省市联动)源码

ajax.js /** * ajax无刷新二级联动下拉菜单(省市联动) * * @author arcow <arcow@126.com> * @version 1.0 * @lastupdate 2005-12-29 * */ var http_request = false; function send_request(url,method) {//初始化.指定处理函数.发送请求的函数 http_request = false; //开始初始化XMLHttpRequest对象 if(win

关于页面的下拉菜单问题

问题描述 关于页面的下拉菜单问题 一个页面有很多下拉菜单,就只让打开一个,打开一个其余的就关闭,这个效果怎么做呀 解决方案 这个一般都是鼠标触发事件,,鼠标放上去把菜单打开,鼠标移走把菜单关闭 解决方案二: 统一关闭设置display为none,然后再设置要打开的菜单容器display为block document.getElementById('xx1').style.display= document.getElementById('xx2').style.display= //...mor

Bootstrap下拉菜单效果实例代码分享_javascript技巧

下拉菜单Dropdown不是表单中<select><option value=''></option></select>那种啊,而是导航条中常见的那种.  Bootstrap官方网站对下拉菜单Dropdown的解释很少,即使是他们的英文官方网站.  对于如何更改下拉菜单的背景颜色.如果对下拉菜单默认的黑色超级链接进行修改,如何把下拉菜单更改成普通的超级链接而不是文字的样式,官方网站是完全没有具体的解释.  而且,官方网站的超级链接代码杂糅着许多没有用的参数.

jQuery实现的多级下拉菜单效果代码_jquery

本文实例讲述了jQuery实现的多级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery多级下拉菜单,在支持html5的浏览器中测试你会发现本菜单很智能,会自动判断浏览器边界来改变下拉菜单的显示方向,在ie下没发现此效果.整体上来看,和Windows系统的"经典"主题时的菜单风格特别相似,配合图片,整体效果还是相当有专业水准的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nlevel-nav-me

Flash结合FireWorks制作下拉菜单

菜单|下拉 今天在网上看到一个FLASH制作的菜单,非常实用,给大家具体说说制作的步骤. 首先看看菜单动画的效果(单击标题可以看到下拉菜单效果) 点击这里下载源文件 下面具体给大家说说制作步骤: 1.首先我们使用Fireworks软件制作几个图形(当然你也可以使用其它做图软件制作),方法比较简单在这里就不给大家讲制作步骤了.做的图片是导航的提示文字图片及四个下拉菜单要显示内容的图片,分别导出为jpg或gif的都可以.如下图: 2.然后把导航图片导入到Flash舞台中,把图片命名为menu,把其它

js仿手机页面文件下拉刷新效果_javascript技巧

最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 要在仿真器下才能看到效果,比如chrome的里边(或者用手机浏览器查看,但测试发现有些浏览器有问题,目前手机猎豹是没问题的) 主要就是: 下拉-->提示松开刷新-->松开后-->开始刷新-->刷新成功后还原 html,css部分 style type="text/css"> #slideDown{margin-top: 0;width: 100%;} #slideDown1,#slideDown2{wi

用以下代码实现的三级联动下拉菜单[调用数据库数据]，没有显示菜单内容,帮我看看是哪里出问题了？谢谢！

问题描述 用以下代码实现的三级联动下拉菜单[调用数据库数据],没有显示菜单内容,帮我看看是哪里出问题了?谢谢! 三个表: P_BigClass(字段:BigClassID,BigClassName,descid), P_SmallClass(字段:SmallClassID,BigClassName,SmallClassName,descid), P_Sales(字段:SalesID,SmallClassName,SalesName,descid) var arrSel=["BigClassNam

如何动态修改级联下拉菜单的子菜单option内容

问题描述 从后台传入数据后, 相应的根据上级下拉菜单A SELECTEDOPTION 动态加载出现不同的下级下拉菜单B 的OPTIONS要求在此页面中存在另一下拉菜单C,通过选择C的 及一BUTTON的ONCLICK事件能够将新下拉菜单C内的OPTION内容动态转到所对应的上级下拉菜单A的下级下拉菜单B的OPTIONS中希望能用JS前台解决高手来帮忙啊 解决方案 这个js很容易解决的,大概会用到appendChild(node) 将node添加到childNodes的末尾removeChild(

jQuery实现下拉菜单（内容为时间）的实时更新及图表的随动更新的方法_jquery

工程分享: 模块1:下拉菜单的实时显示最近一周时间: //显示日期下拉选框 for(var i=0;i<7;i++){ $("#choose1>option:eq("+i+")").html(GetDateStr(-i)); $("#choose1>option:eq("+i+")").attr("value",GetDateStr(-i));//该语句为了便于下拉选中的数据的值 } //