下拉列表 用js显示某行 怎么做急问！！！！！！！！！！！


                                                             选择客服部门：
<select name="serverName" onchange="selectServer(this.value)">
<option value="allServer" selected="selected">
全部客服
</option>
<option value="chun">
春哥
</option>
                                                                         <option value="zeng">
曾哥
</option>
</c:forEach>
</select>                                         <table border="1" width="800">
                                                  <tr>
         <td>客服名</td>
<td>好</td>
<td>一般</td>
<td>差</td>
    </tr>    <tr>
         <td>曾哥</td>
<td>3</td>
<td>2</td>
<td>1</td>
    </tr>
                                                  <tr>
         <td>春哥</td>
<td>3</td>
<td>2</td>
<td>1</td>
    </tr>
                  </table>
比如我选择了曾哥就显示曾哥这行 如果选择全部就要选择全部 请问怎么用JS实现啊

解决方案 »

  1.   

    在select的onchange事件里面去写，当选择了一项后，用ajax发送一个异步请求，把得到的数据返回的前台，然后先动态删除表格的所有行，再把所得数据动态加到表格里面
      

  2.   

    动态删除所有行后，其他的肯定就都不见了，也就是把<table>下的所有子节点remove掉了，然后重新创建tr和td节点，并把后台异步传回来的数据动态加入到新创建的节点中，再把新创建的节点动态添加到<table>中，这样新的数据就显示出来了
      

  3.   

    应该能达到你的要求吧：
    <html>
    <head>
    <script type="text/javascript">
    function selectServer(name) {
    //alert(name);
    var rows = document.getElementsByTagName("TR");
    for(var index = 0; index < rows.length; index ++) {
    if(rows[index].className == "kefu" && rows[index].kefuname == name) {
    rows[index].style.display = "block";
    } else if(rows[index].className == "kefu" && rows[index].kefuname != name) {
    rows[index].style.display = (name == "allServer" ? "block" : "none");
    }
    }
    }
    </script>
    </head>
    <body>
    选择客服部门： 
    <select   name= "serverName "   onchange= "selectServer(this.value) "> 
    <option   value= "allServer"   selected= "selected "> 
    全部客服 
    </option> 
    <option   value= "chun"> 
    春哥 
    </option> 
    <option   value= "zeng"> 
    曾哥 
    </option> 
    </select> <table   border= "1 "   width= "800 "> 
    <tr> 
    <td> 客服名 </td> 
    <td> 好 </td> 
    <td> 一般 </td> 
    <td> 差 </td> 
    </tr>
    <tr class="kefu" kefuname="zeng"> 
    <td> 曾哥 </td> 
    <td> 3 </td> 
    <td> 2 </td> 
    <td> 1 </td> 
    </tr> 
    <tr class="kefu" kefuname="chun"> 
    <td> 春哥 </td> 
    <td> 3 </td> 
    <td> 2 </td> 
    <td> 1 </td> 
            </tr> 
    </table>
    </body>