从网上下载了一个源码,但是只有一个下拉框,我想做出5个下拉框,不知道要怎么修改。我对JS不熟悉。请大家帮个忙谢谢。<html>
<style type="text/css">
.mainbox{
width:120px;
font-family: "宋体";
font-size: 12px;
overflow: hidden;
}.box0{
width:88px;
height:21px;
float:left;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #9C9C9C;
border-bottom-color: #9C9C9C;
border-left-color: #9C9C9C;
line-height: 1.6;
padding-left: 5px;
}.box1{
width:18px;
height:21px;
cursor:pointer;
float:left;
text-align:right;
overflow: hidden;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #9c9c9c;
border-right-color: #9c9c9c;
border-bottom-color: #9c9c9c;
}
#items{
border:1px solid black;
width:98px;
display:none;
float: left;
}
#box3{
width:96px;
/*border-bottom:1px solid green;
border-left:1px solid green;
border-right:1px solid green;
*/
padding-left:4px;
}
.over{
background-color:#0066CC;
font-weight:bold;
color:#FFF;
/*border-top:1px dotted black;
border-bottom:1px dotted black;*/
cursor:pointer;
width: 200px;
}</style>
<body><div class="mainbox">
<div id="box0" class="box0">不限</div>
<div id="box1" class="box1"><img src="file:///D|/city/images/select2_12.gif" width="18" height="21"></div>
<div id="items" style="">
<div id="box3">湖北</div>
<div id="box3">武汉</div>
<div id="box3">孝感</div>
<div id="box3">枝江</div>
<div id="box3">汉川</div>
<div id="box3">还有</div>
<div id="box3">二手房</div>
</div>
</div>
<!---->
<script type="text/javascript">
var oDiv0=document.getElementById("box0");
var oDiv1=document.getElementById("box1");
var oDiv=document.getElementById("items");
oDiv1.onclick=function(){
oDiv.style.display=oDiv.style.display=="block"?"none":"block";
show();
}
function hide(obj){
var obj=obj;
obj.parentNode.style.display="none";
}
function show(){
for(var i=0;i<oDiv.childNodes.length;i++){
oDiv.childNodes[i].onmouseover=function(){
this.className="over";
}
oDiv.childNodes[i].onmouseout=function(){
this.className="";
}
oDiv.childNodes[i].onclick=function(){
oDiv0.innerHTML=this.innerHTML;
hide(this);
}
}
}
</script>
</body>
</html>