用JavaScript制作关联下拉选择框

在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 >