***********用JS如何让下拉菜单显示DIV，选一项显示相应的DIV而隐藏其他的DIV*************


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css"> 
.spacer{ 
width:160px; 
height:30px; 
background-color:red; 
} 
.spacerhidden{ 
width:160px; 
height:30px; 
background-color:red; 
display:none
} 
</style> 
</HEAD><BODY><div id="divx" class="spacer" >
1
</div>
<div id="divx" class="spacerhidden">
2
</div><div id="divx" class="spacerhidden">
3
</div>
<div id="divx" class="spacerhidden">
4
</div><div id="divx" class="spacerhidden">
5
</div>
<SELECT NAME="divsel" onchange="showdiv(this)">
<option>div1</option>
<option>div2</option>
<option>div3</option>
<option>div4</option>
<option>div5</option>
</SELECT><SCRIPT LANGUAGE="JavaScript">
var seldiv=divx[0];
function showdiv(obj){
seldiv.className="spacerhidden";
seldiv=divx[obj.selectedIndex];
seldiv.className="spacer";
}</SCRIPT>
</BODY>
</HTML>

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE></HEAD><BODY><div id="div1" style="display:none">1</div>
    <div id="div2" style="display:none">2</div>
    <div id="div3" style="display:none">3</div>
    <div id="div4" style="display:none">4</div>
    <div id="div5">5</div>
    <SELECT NAME="sel" onchange="showdiv(this)">
        <option>div1</option>
        <option>div2</option>
        <option>div3</option>
        <option>div4</option>
        <option>div5</option>
    </SELECT><SCRIPT LANGUAGE="JavaScript">function showdiv(obj){
    var oDiv = document.getElementsByTagName('div');
    var oValue = obj.options[obj.selectedIndex].text;
    for(var i=0;i<oDiv.length;i++){
    if(oDiv[i].id == oValue){
    oDiv[i].style.display = 'block';
    }else{
    oDiv[i].style.display = 'none';
    }
    }
      
    }</SCRIPT>
    </BODY>
    </HTML>