下拉框控制是否显示或隐藏表格

下拉框是
<optionvalue="1">社会新闻</option>
<optionvalue="2">行业新闻</option>
<optionvalue="3">人物专题</option>
<optionvalue="8">销售公市</option>
<optionvalue="9">房产资讯</option>
<optionvalue="10">地产招商</option>
<optionvalue="11">施工装修</option>如何选社会新闻的时候出现一个表格，选取其他的出现对应的表格

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

找到了一个这样的代码，用这个貌似不行，必须是顺序的，如12345678！我的中间有跳开的数字
<script type="text/javascript">
function cc(){
//先隐藏所有表格
document.getElementById("tbl1").style.display = "none";
document.getElementById("tbl2").style.display = "none";
document.getElementById("tbl3").style.display = "none";
//取得选取的项目
var tmp = document.getElementById("aa").selectedIndex + 1;
var ddd = "tbl" + tmp;
//设置选取项对应表格显示
document.getElementById(ddd).style.display = "block";
}
</script>
<select id="aa" onchange="cc()">
<option value="1">tbl1</option>
<option value="2">tbl2</option>
<option value="3">tbl3</option>
</select>
<table id="tbl1" border="1" style="display:none;"><tr><td>table 1</td></tr></table>
<table id="tbl2" border="1" style="display:none;"><tr><td>table 2</td></tr></table>
<table id="tbl3" border="1" style="display:none;"><tr><td>table 3</td></tr></table>
把select的val和table的id对应起来，这样选中select的时候，就根据val来显示隐藏table。不管你是选的哪一个，只要对应起来就行。
<head>
    <script src="Styles/jquery-1.7.2.min.js" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript">
        $(function () {            if ($("#aa").val() == "1") {
                $("#tbl1").css("display", "");
                $("#tbl2").css("display", "none");
                $("#tbl3").css("display", "none");            }
            if ($("#aa").val() == "2") {
                $("#tbl1").css("display", "none");
                $("#tbl2").css("display", "");
                $("#tbl3").css("display", "none");
            }
            if ($("#aa").val() == "3") {
                $("#tbl1").css("display", "none");
                $("#tbl2").css("display", "none");
                $("#tbl3").css("display", "");            }
            $("#aa").change(function () {
                if ($("#aa").val() == "1") {
                    $("#tbl1").css("display", "");
                    $("#tbl2").css("display", "none");
                    $("#tbl3").css("display", "none");                }
                if ($("#aa").val() == "2") {
                    $("#tbl1").css("display", "none");
                    $("#tbl2").css("display", "");
                    $("#tbl3").css("display", "none");
                }
                if ($("#aa").val() == "3") {
                    $("#tbl1").css("display", "none");
                    $("#tbl2").css("display", "none");
                    $("#tbl3").css("display", "");                }            });
        })
    </script>
</head>
<body>
    <select id="aa">
        <option value="1">tbl1</option>
        <option value="2">tbl2</option>
        <option value="3">tbl3</option>
    </select>
    <table id="tbl1" border="1">
        <tr>
            <td>
                table 1
            </td>
        </tr>
    </table>
    <table id="tbl2" border="1">
        <tr>
            <td>
                table 2
            </td>
        </tr>
    </table>
    <table id="tbl3" border="1">
        <tr>
            <td>
                table 3
            </td>
        </tr>
    </table>
</body>
<script type="text/javascript">
function cc(){
//先隐藏所有表格
var _tables = document.getElementsByTagName('table');
for(var i = 0 ; i < _tables.length ; ++i){
_tables[i].style.display = 'none';
}
_tables[+document.getElementById("aa").value-1].style.display = "block";
}
</script>
<select id="aa" onchange="cc()">
<option value="1">tbl1</option>
<option value="2">tbl2</option>
<option value="3">tbl3</option>
</select>
<table border="1" style="display:none;"><tr><td>table 1</td></tr></table>
<table border="1" style="display:none;"><tr><td>table 2</td></tr></table>
<table border="1" style="display:none;"><tr><td>table 3</td></tr></table>
如果LZ的value值是不连续的，把
_tables[+document.getElementById("aa").value-1].style.display = "block";
改成
_tables[document.getElementById("aa").selectedIndex].style.display = "block";
<script type="text/javascript">
    function cc(){
        var container = document.getElementById('tables_con');
        var v = document.getElementById('aa').value;
        if(v){
            var tables = container.getElementsByTagName('table');
            var len = tables.length;
            for(var i=0;i<len;i++){
                tables[i].style.display = 'none';
            }
            document.getElementById('tbl'+v).style.display = 'block';
        }
    }
</script>
<select id="aa" onchange="cc()">
<option value="1">tbl1</option>
<option value="2">tbl2</option>
<option value="3">tbl3</option>
</select>
<div id="tables_con">
    <table id="tbl1" border="1" style="display:none;"><tr><td>table 1</td></tr></table>
    <table id="tbl2" border="1" style="display:none;"><tr><td>table 2</td></tr></table>
    <table id="tbl3" border="1" style="display:none;"><tr><td>table 3</td></tr></table>
</div>