恩,以前搜索问题的时候,在csdn博客这个大家庭中收获甚多,鉴于写过的代码很快就会忘,放到文件里面不容易找,开始我的第一篇备忘录
需求点击一个下拉列表在右侧div显示内容
原先使用的是下拉框,但是点击选中之后
右侧的下拉框不会显示选择的,其后使用select来做(附上原先的代码)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击超链接显示隐藏div</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*自动隐藏选中的id*/
$("#suoshu1").toggle();
$("#suoshu2").toggle();
$("#suoshu3").toggle();
$("#a1").click(function() {
$("#suoshu0").hide();
$("#suoshu1").toggle();
$("#suoshu2").hide();
$("#suoshu3").hide();
});
$("#a2").click(function() {
$("#suoshu0").hide();
$("#suoshu1").hide();
$("#suoshu3").hide();
$("#suoshu2").toggle();
});
$("#a3").click(function() {
$("#suoshu0").hide();
$("#suoshu1").hide();
$("#suoshu2").hide();
$("#suoshu3").toggle();
});
});
/*复选框限定3个*/
$(document).ready(function() {
$('input[type=checkbox]').click(function() {
$("input[name='chengguo']").attr('disabled', true);
if($("input[name='chengguo']:checked").length >= 3) {
$("input[name='chengguo']:checked").attr('disabled', false);
} else {
$("input[name='chengguo']").attr('disabled', false);
}
$("input[name='12']").attr('disabled', true);
if($("input[name='12']:checked").length >= 3) {
$("input[name='12']:checked").attr('disabled', false);
} else {
$("input[name='12']").attr('disabled', false);
}
});
})
</script>
</head>
<body>
<tr class="">
<td style="width:240px;">
项目所属产业领域
</td>
<td>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
------------请选择项目所属产业领域------------
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" id="a1">战略性新兴产业</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" id="a2">传统产业</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" id="a3">其他产业</a>
</li>
</ul>
</div>
</td>
<td colspan="2">
<div id="suoshu0">
请在左侧选择项目所属产业领域
</div>
<!--所属1-->
<div style="text-align: center;" id="suoshu1">
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="" checked>1.新一代信息技术
</label>
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="">2.生物
</label>
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="">3.新能源
</label>
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="">4.新能源汽车
</label>
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="">5.新材料
</label>
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="">6.节能环保
</label>
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="">7.高端装备制造
</label>
</div>
<!--所属2-->
<div style="text-align: center;" id="suoshu2">
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="" checked>1.食品
</label>
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="">2.有色
</label>
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="">3.化工
</label>
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="">4.装备制造
</label>
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="">5.汽车及零部件
</label>
<label class="checkbox-inline">
<input type="radio" name="13" id="" value="">6.纺织服装
</label>
</div>
<!--所属3-->
<div style="text-align: center;" id="suoshu3">
<input type="text" id="" style="width:400px;" class="form-control" placeholder="">
</div>
</td>
</tr>
</body>
</html>在搜索的过程中,发现可以通过获取option的value值来进行触发事件,后改为下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>获取select中option的value值并触发隐藏显示div效果</title>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#suoshu1").toggle();
$("#suoshu2").toggle();
$("#suoshu3").toggle();
$("#sel").bind("change", function() {
if($(this).val() == 0) {
$("#suoshu1").hide();
$("#suoshu2").hide();
$("#suoshu3").hide();
} else {
switch($(this).val()){
case '1':
$("#suoshu1").toggle();
$("#suoshu2").hide();
$("#suoshu3").hide();
break;
case '2':
$("#suoshu1").hide();
$("#suoshu3").hide();
$("#suoshu2").toggle();
break;
case '3':
$("#suoshu1").hide();
$("#suoshu2").hide();
$("#suoshu3").toggle();
break;
}
}
});
});
</script>
</head>
<body>
<div id="thediv"></div>
<select id="sel">
<option value="0">-请选择-</option>
<option value="1">1111111</option>
<option value="2">2222222</option>
<option value="3">3333333</option>
</select>
<div style="text-align: center;" id="suoshu1">qweqweqweq</div>
<div style="text-align: center;" id="suoshu2">asdasdasasdasd</div>
<div style="text-align: center;" id="suoshu3">zxczxcxzcxczxzxczxczxczxc</div>
</body>
</html>版权声明：本文为LX_1778757629原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。