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

最新推荐文章于 2022-12-26 14:48:50 发布

猩猿亿码

最新推荐文章于 2022-12-26 14:48:50 发布

阅读量2.6k

点赞数 2

分类专栏：前端文章标签： jQuery AJAX 下拉菜单前端交互后端开发

本文链接：https://blog.csdn.net/qq_44316726/article/details/108953699

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
代码：

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

作为一名后端开发工程师，前端使用的技能也算是零基础，慢慢积累，慢慢沉淀。

猩猿亿码

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
4
评论
选择第一个下拉框的某个选项，显示第二个下拉框

效果图：代码：<!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"&g
复制链接

扫一扫

专栏目录