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

标点_网络 2013-03-20 09:47:30

下拉框是
<optionvalue="1">社会新闻</option>
<optionvalue="2">行业新闻</option>
<optionvalue="3">人物专题</option>
<optionvalue="8">销售公市</option>
<optionvalue="9">房产资讯</option>
<optionvalue="10">地产招商</option>
<optionvalue="11">施工装修</option>

如何选社会新闻的时候出现一个表格，选取其他的出现对应的表格

...全文

219 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

functionsub 2013-03-20

打赏
举报


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

bbjbepzz 2013-03-20

打赏
举报

引用 4 楼 bbjbepzz 的回复:

JavaScript code?123456789101112131415161718<script type="text/javascript">function cc(){//先隐藏所有表格 var _tables = document.getElementsByTagName('table'); for(var i = 0 ; i < _tables.l……

如果LZ的value值是不连续的，把 _tables[+document.getElementById("aa").value-1].style.display = "block"; 改成 _tables[document.getElementById("aa").selectedIndex].style.display = "block";

bbjbepzz 2013-03-20

打赏
举报


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

海优 2013-03-20

打赏
举报

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

田小瘦 2013-03-20

打赏
举报

把select的val和table的id对应起来，这样选中select的时候，就根据val来显示隐藏table。不管你是选的哪一个，只要对应起来就行。

标点_网络 2013-03-20

打赏
举报

找到了一个这样的代码，用这个貌似不行，必须是顺序的，如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>