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