选择第一个下拉框的某个选项，显示第二个下拉框
时间：12-09来源：作者：点击数：
选择第一个下拉框的某个选项，显示第二个下拉框
效果图：
代码：
<!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>
作为一名后端开发工程师，前端使用的技能也算是零基础，慢慢积累，慢慢沉淀。
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号