在web页面上,我们经常会看到几个相互关联的下拉菜单选择框。当访问者选择第一个下拉选择框中的一个选项后,第二个下拉选择框中的内容就会随之发生变化。对于web开发人员来说,这种情况常常会发生。比如,我们要选择一个地区名称,那么首先要选择省份名称,然后再根据省份名称选择其中的城市名称:
下面就介绍如何使用JavaScript脚本实现上述功能。
实现原理
上面的功能,实际上就是要实现动态生成页面内容的工作。这需要Internet Explorer 4.0版本和动态HTML技术的支持。首先建立一个空的SELECT列表,然后再根据需要,使用合适的OPTION元素填充它。为了避免输入过多的冗余代码,可以分配给选项相应的标识和数值,然后,就可以引用它来完成填充工作。
相关代码
注意,DHTML代码仅仅适用于Internet Explorer 4.0或者以上版本,所以,如果要考虑更多的用户端浏览器类型,请添加另外的判别代码,从而引导用户到其他的页面。
< HTML >
< HEAD >
< SCRIPT LANGUAGE="JavaScript" >
function setcity() {
switch (document.shengshi.sheng.value) {
case '河北' :
var labels = new Array("石家庄","沧州","唐山");
var values = new Array("sjz","cz","ts");
break;
case '山东' :
var labels = new Array("济南","青岛","烟台");
var values = new Array("jn","qd","yt");
break
}
// 清空市列表选择框的内容
document.shengshi.city.options.length = 0;
// 从数组中添加内容
for(var i = 0; i < labels.length; i++) {
document.shengshi.city.add(document.createElement("OPTION"));
document.shengshi.city.options[i].text=labels[i];
document.shengshi.city.options[i].value=values[i];
}
// 选择第一个选项
document.shengshi.city.selectedIndex = 0;
}
< /SCRIPT >
< /HEAD >
< BODY >
< FORM NAME="shengshi" >
省:
< SELECT NAME="sheng" OnChange="setcity()" >
< OPTION VALUE="河北" >河北< /OPTION >
< OPTION VALUE="山东" SELECTED >山东< /OPTION >
< /SELECT >
市:
< SELECT NAME="city" >< /SELECT >
< /FORM >
< !-- 执行初始化选择列表 -- >
< SCRIPT LANGUAGE="JavaScript" >
setcity();
< /SCRIPT >
< /BODY >
< /HTML >
用JavaScript制作关联下拉选择框
最新推荐文章于 2022-11-14 09:30:38 发布