jsp页面如何实现通过改变下拉列表的值来修改下面的页面显示？

RT，最近做一个页面，要把值写死在下拉列表里面，所以不能用c if 标签。。
想问一下如何来实现通过改变下拉列表的值来显示不同的table。。
比如：下拉列表中有 1  2  3 ，三个值选择1 的时候对应的table 1  选择2 的时候显示 table 2.。

解决方案 »

  1.   

    <html>
    <head>
    <script type="text/javascript">
    function changeTable() {
    var tabIndex = document.getElementById("sel").value;
    for (var i= 1; i <= 3; i++){
    var disp = (i == tabIndex) ? "" : "none";
    document.getElementById("table" + i).style.display = disp;
    }
    }
    </script>
    </head>
    <body><select id="sel" onchange="changeTable()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select><br>表格：
    <table border=1 id="table1" style="display:">
    <tr>
    <td>1111</td>
    <tr>
    <tr>
    <td>1111</td>
    <tr>
    </table><table border=1 id="table2" style="display:none">
    <tr>
    <td>2222</td>
    <tr>
    <tr>
    <td>2222</td>
    <tr>
    </table><table border=1 id="table3" style="display:none">
    <tr>
    <td>3333</td>
    <tr>
    <tr>
    <td>3333</td>
    <tr>
    </table>
     
    </body>
    </html>
      

  2.   


    function changeTable(){
    var tabIndex = document.getElementById("sel").value;
    for ( var i = 1; i <= 3; i++) {
    if (i != tabIndex) {
    document.getElementById("table" + i).style.display = "none";
    }else{
    document.getElementById("table" + i).style.display = "block";
    }
    }
    }JS这样写
      

  3.   

    楼主，其实你这个样子做，会让页面代码太罗嗦了。你可以考虑通过后台去做，在select中用onchange事件去控制，后台接受这个值，然后查询对应的值所对应的信息，返回给前台，这样前台就不用去考虑如此多的表了啊。如果从加载速度来说，这样快的多。如果楼主不想看到页面刷新，可以考虑用AJAX来做，这样更加友好了……