您的位置：首页 > 产品设计 > UI/UE

获取select中option的value值并触发隐藏显示div效果

2016-10-28 19:22 344 查看
恩,以前搜索问题的时候,在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>使用select之后,发现点击option没有事件,测试发现只有点击select才会出发事件,那么上面的通过获取点击具体链接的id(此处是option)方法没法用了,之后就想通过获取select下被option选中的id值来触发事件,在经过百度之后,可以通过$("select
option:selected").attr("id");但是我却没有成功(因为自己能力问题);
在搜索的过程中,发现可以通过获取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>为了以后自己忘记网页长什么样子,附张截图
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  点击隐藏显示div
相关文章推荐
新的分享
章节导航