实现的效果如下图:
页面代码
下拉框:
<select id="select3" name="select3" οnchange="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";