- 论坛徽章:
- 1
|
- 在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 >
复制代码
不过最好使用Ajax类似技术来实现。 |
|