一般情况下，在第一个下拉框选择完后，第二个下拉框的内容要根据第一个下拉框的内容改变而改变。以下是我在其他网站做的实例，根据原理，当然也可以做出三级联动的。

Js代码：

<script src="http://www.xcsoft.cn/Public/js/jquery.js"></script>
<script>
//下面是定义数组的两种方法。
var yf=['一月份报告','二月份报告','三月份报告','四月份报告','五月份报告','六月份报告','七月份报告','八月份报告','九月份报告','十月份报告','十一月份报告','十二月份报告'];
var jd=new Array("第一季度报告","第二季度报告","第三季度报告","第四季度报告");
var nz=new Array('上半年报告','下半年报告','年终报告');
window.onload=function(){
$("#select2").html(forcontent(yf))
}
function change(val){
    $xx=$("#select2");
    if(val==4){
        $xx.html(forcontent(yf))
        }else if(val==5){
            $xx.html(forcontent(jd));
            }else{
                $xx.html(forcontent(nz));
    }
}
function forcontent(f){
    var content=""
    for(var i=0;i<=f.length-1;i++){
        content+='<option value="'+f[i]+'">'+f[i]+'</option>';
    }
    return content;
}
</script>

HTML代码：

<form id="form1" name="form1" method="post" action="">
  <select name="select" id="select" onchange="change(this.value)">
  <option value="4">月报告</option>
  <option value="5">季报告</option>
  <option value="6">年报告</option>
  </select>
  <select name="select2" id="select2">
  </select>
</form>

标签  技巧网页制作

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)