选择第一个下拉框的某个选项，显示第二个下拉框

时间：12-09来源：作者：点击数：36

效果图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.4.js" ></script>
	<body>
		<div class="filter fr">
        <select id="gzsj"  onchange="gzsj();">
            <option value="">请选择</option>
            <option value="1">公证机构</option>
            <option value="2">公证人员</option>
            <option value="3">案件数量</option>
        </select>
        <span id="spandemo">
            <select id="testsj" onchange="ajslsj();">
                <option value="1">近5年</option>
                <option value="2">近12月</option>
                <option value="3">近10月</option>
            </select>
        </span>
    </div>
		
	</body>
	
<script type="text/javascript">
	//当页面加载完毕 隐藏<span id="spandemo">标签内容
  	$(function () {
        document.getElementById("spandemo").style.display="none";//设置spandemo标签隐藏
    });
    
    //选择第1个下拉框触发事件
    function gzsj(){
        var gzsj = document.getElementById("gzsj").value;
        if(gzsj==1){  //公证机构
        	document.getElementById("spandemo").style.display="none";//设置spandemo标签隐藏
			//发送ajax请求
//          jQuery.ajax({
//              type: 'POST',
//              url: "${base}/private/showData/gz/showgzjgsl",
//              dataType: "json",
//              success: function (data) {
//                  console.log(data)
//                  jgslzzt(data);    //柱状图 机构数量
//              }
//          });
      }else if(gzsj==2){ //公证人员
      	document.getElementById("spandemo").style.display="none";//设置spandemo标签隐藏
//          jQuery.ajax({
//              type: 'POST',
//              url: "${base}/private/showData/gz/showgzrysl",
//              dataType: "json",
//              success: function (data) {
//                  console.log(data)
//                  jgryslzzt(data);    //柱状图 机构数量
//              }
//          });
        }else if(gzsj==3){
            document.getElementById("spandemo").style.display="inline";  //设置spandemo标签显示
            document.getElementById("testsj").value=1; //默认近5年
//          jQuery.ajax({
//              type: 'POST',
//              url: "${base}/private/showData/gz/showgzajsl",
//              dataType: "json",
//              success: function (data) {
//                  console.log(data)
//                  gzajslzzt(data);    //柱状图 机构数量
//              }
//          });
        }else{
//          jQuery.ajax({
//              type: 'POST',
//              url: "${base}/private/showData/gz/showgzjgsl",
//              dataType: "json",
//              success: function (data) {
//                  console.log(data)
//                  jgslzzt(data);    //柱状图 机构数量
//              }
//          });
        }

    }
    
    //第2个下拉框触发事件
    function ajslsj(){
        var testsj = document.getElementById("testsj").value;
        if(testsj==1){  //近5年
            alert('近5年')
        }else if(testsj==2){ //近12月
            alert('近12月')
        }else {     //近10月
             alert('近10月')
        }
    }
    
 </script>
</html>