实现的效果如下图:
页面代码
下拉框:
<select id="select3"
name="select3" onchange="showlist()">
<option
value="-1">--请
选择--</option>
<option
value="1">--主题分类--</option>
<option
value="2">--体裁分类--</option>
<option
value="3">--对象分类--</option>
</select>
下面的分类页面代码:
<table width="80%"
border="0" align="center" cellpadding="0"
cellspacing="0">
<tr id="zt"
style="display:none">
<td
align="left"><asp:Literal
ID="Literal1"
runat="server"></asp:Literal></td>
</tr>
<tr id="tc"
style="display:none">
<td
align="left"><asp:Literal
ID="Literal2"
runat="server"></asp:Literal></td>
</tr>
<tr id="dx"
style="display:none">
<td
align="left"><asp:Literal
ID="Literal3"
runat="server"></asp:Literal></td>
</tr>
</table>
<script language="javascript"
type="text/javascript">
function changeShow(str)
{
if(document.getElementByIdx('sed'+str).style.display
== "none")
{
document.getElementByIdx('sed'+str).style.display
= "block";
document.getElementByIdx('topimg'+str).src
= "../images/minus.gif";
document.getElementByIdx('topflor'+str).src
= "../images/folderopen.gif";
}
else
{
document.getElementByIdx('sed'+str).style.display
= "none";
document.getElementByIdx('topimg'+str).src
= "../images/plusbottom.gif";
document.getElementByIdx('topflor'+str).src
= "../images/folder.gif";
}
}
function changeShow1(str)
{
if(document.getElementByIdx('second'+str).style.display
== "none")
{
document.getElementByIdx('second'+str).style.display
= "block";
document.getElementByIdx('timg'+str).src
= "../images/minus.gif";
document.getElementByIdx('tflor'+str).src
= "../images/folderopen.gif";
}
else
{
document.getElementByIdx('second'+str).style.display
= "none";
document.getElementByIdx('timg'+str).src
= "../images/plusbottom.gif";
document.getElementByIdx('tflor'+str).src
= "../images/folder.gif";
}
}
function changeShow2(str)
{
if(document.getElementByIdx('secd'+str).style.display
== "none")
{
document.getElementByIdx('secd'+str).style.display
= "block";
document.getElementByIdx('tim'+str).src
= "../images/minus.gif";
document.getElementByIdx('tfl'+str).src
= "../images/folderopen.gif";
}
else
{
document.getElementByIdx('secd'+str).style.display
= "none";
document.getElementByIdx('tim'+str).src
= "../images/plusbottom.gif";
document.getElementByIdx('tfl'+str).src
= "../images/folder.gif";
}
}
</script>
需要用到的JS代码:
<script language="javascript"
type="text/javascript">
function showlist()
{
var o = document.getElementByIdx('select3');
var strValue = o.options[o.options.selectedIndex].value;
if(strValue == "1")
{
document.getElementByIdx('zt').style.display = "block";
document.getElementByIdx('tc').style.display = "none";
document.getElementByIdx('dx').style.display = "none";
}
else if(strValue == "2")
{
document.getElementByIdx('zt').style.display = "none";
document.getElementByIdx('tc').style.display = "block";
document.getElementByIdx('dx').style.display = "none";
}
else if(strValue == "-1")
{
document.getElementByIdx('zt').style.display = "none";
document.getElementByIdx('tc').style.display = "none";