top
元旦节到了,元旦节快乐...

固定当前背景  反馈、咨询、建议、留言等,请点这里[Alt+G]

本栏相关
其他文章
JavaScriptJavaScript当前位置:首页 >>开发技巧>>JavaScript
Jquery用数组编写下拉选项的二级联动
编辑yang 发布时间2014-09-11 浏览量2304 来源本站编辑 特大
摘要:​一般情况下,在第一个下拉框选择完后,第二个下拉框的内容要根据第一个下拉框的内容改变而改变。以下是我在其他网站做的实例。

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

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>

标签  技巧网页制作

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


反馈/咨询/建议/留言(GuestBook)
您好,怎么称呼您!
您的姓名:
上一步:鼠标向上滚动/左方向键(←)
下一步或完成:鼠标向下滚动/Tab键/右方向键(→)
如果您有空的话,可以填一下您的相关信息!
您的电话:
您的邮箱:
现在,请填写您想要了解的信息!
信息内容:
验证码: 看不清?点图片刷新