<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<!-- <script>
$(function() {
//隐藏div $("#shouhou2").hide();
$("#shouhou3").hide();
//给div添加change事件
$("#type").change(function() {
if($(this).val() == 1 ) {
$("#shouhou1").show();
$("#shouhou2").hide();
$("#shouhou3").hide();
} else if($(this).val() == 2 ) {
$("#shouhou2").show();
$("#shouhou1").hide();
$("#shouhou3").hide();
}
else if($(this).val() == 3 ) {
$("#shouhou3").show();
$("#shouhou1").hide();
$("#shouhou2").hide();
}
})
})
</script> --> <body>
<select name="" onchange="select(this)">
  <option value="1">题目一</option>
  <option value="2">题目二</option>
  <option value="3">题目三</option>
  <option value="4">题目四</option>
</select> <div>   <div id="div1">内容一</div>   <div id="div2" style="display:none">内容二</div>   <div id="div3" style="display:none">内容三</div>   <div id="div4" style="display:none">内容四</div> </div> <script> function select(obj){
$("#div" + obj.value).show().siblings().hide(); }
</script> <!-- <select class="select" size="1" name="type" id="type"> <option value="1">表格</option>
<option value="2">折线图</option>
<option value="3">柱状图</option> </select>
<div id="shouhou1" style>表格区域</div>
<div id="shouhou2" style>折线图区域</div>
<div id="shouhou3" style>柱状图区域</div> -->
</body> </html>

select下拉选中显示对应的div隐藏不相关的div-LMLPHP

05-11 10:52