javascript高手帮忙看一个下拉列表的问题

Question

<select name="text" onChange="test_change(this)">
<option value="" selected>请选择</option>
<option value="1" selected>test1</option>
<option value="2" selected>test2</option>
<option value="3" selected>test3</option>
</select><table id="tab" border=1>
<tr style="display: none"> 
 <td>test1</td>
</tr><tr style="display: none"> 
 <td>test2</td>
</tr><tr style="display: none"> 
 <td>test2</td>
</tr></table><SCRIPT LANGUAGE="JavaScript">
function test_change(e)
{
    var tab = document.getElementById("tab");
    for(var i=0; i<tab.rows.length; i++)
        tab.rows[i].style.display = "none";
    var s = e.value;
    if(s!="")
    {
        tab.rows[parseInt(s, 10) - 1].style.display = "";
    }
}
</SCRIPT>

Answer 1

使用prototype.js库可以更方便一些<select name="text" onChange="test_change(this)">
<option value="">请选择</option>
<option value="t1">test1</option>
<option value="t1,t2">test2</option>
<option value="t1,t2,t3">test3</option>
</select>
<table>
<tr id="t1">
<td>test1</td>
</tr><tr id="t2">
<td>test2</td>
</tr>
<tr id="t3">
<td>test3</td>
</tr>
</table>
<script language="javascript" src="prototype.js"></script>
<script language="javascript">
<!--
Element.hide("t1","t2","t3");
function test_change(o){
Element.hide("t1","t2","t3");
Element.show.apply(window,o.value.split(","));
}
//-->
</script>

Answer 2

prototype.js 稍微看了一下，不妥之处与错误不少

Answer 3

谢谢meizz(梅花雪)大哥,但现在有一个新问题,如果value值不是1,2,3而是相对应的test1,test2,test3这个js怎么写?

Answer 4

<select name="text" onChange="test_change(this)">
<option value="" selected>请选择</option>
<option value="1" selected>test1</option>
<option value="2" selected>test2</option>
<option value="3" selected>test3</option>
</select><table id="tab" border=1>
<tr style="display: none"> 
 <td>test1</td>
</tr><tr style="display: none"> 
 <td>test2</td>
</tr><tr style="display: none"> 
 <td>test2</td>
</tr></table><SCRIPT LANGUAGE="JavaScript">
function test_change(e)
{
    var tab = document.getElementById("tab");
    for(var i=0; i<tab.rows.length; i++)
        tab.rows[i].style.display = "none";
    var s = e.selectedIndex;
    if(s!=-1)
    {
        tab.rows[s - 1].style.display = "";
    }
}
</SCRIPT>

Answer 5

<select name="text" onChange="test_change(this)">
<option value="" selected>请选择</option>
<option value="test1" selected>test1</option>
<option value="test2" selected>test2</option>
<option value="test3" selected>test3</option>
</select>你没有理解我的意思,如果value的值为test1,test2,test3时js该怎么写?

Answer 6

prototype.js 稍微看了一下，不妥之处与错误不少我看了很长时间，有些代码还没有转过弯来，你觉得哪些地方有问题？

Answer 7

<select name="text" onChange="test_change(this)">
<option value="" selected>please select</option>
<option value="test1" selected>test1</option>
<option value="test2" selected>test2</option>
<option value="test3" selected>test3</option>
</select><table id="tab" border=1>
<tr style="display: none"> 
 <td>test1</td>
</tr><tr style="display: none"> 
 <td>test2</td>
</tr><tr style="display: none"> 
 <td>test3</td>
</tr></table><SCRIPT LANGUAGE="JavaScript">
function test_change(e)
{
    var tab = document.getElementById("tab");
    for(var i=0; i<tab.rows.length; i++)
        tab.rows[i].style.display = "none";
    var s = e.selectedIndex;
    if(s>0)
    {
        tab.rows[s - 1].style.display = "";
    }
}
</SCRIPT>

Answer 8

谢谢meizz(梅花雪)大哥,可以了!