求助，怎么做成两个下拉框啊？我做出来的两个老是有冲突

我用DIV模拟select菜单，但是一个可以。两个就不行了。那位帮忙改一下，谢谢了。<style type="text/css">
#box{
width:120px;
font-family: "宋体";
font-size: 12px;
overflow: hidden;
margin-top: 20px;
margin-left: 100px;
float: left;
}
#hole {
height: 300px;
width: 500px;
float: left;
}.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;
}.over{
background-color:#0066CC;
font-weight:bold;
color:#FFF;
/*border-top:1px dotted black;
border-bottom:1px dotted black;*/
cursor:pointer;
width: 96px;
}
</style>
<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>
<div id="hole"><div id="box">
<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 class="box3">湖北</div>
<div class="box3">武汉</div>
<div class="box3">孝感</div>
<div class="box3">枝江</div>
</div>
</div>
</div>
<!----></body>

解决方案 »

  1.   

    可以的啊<style type="text/css">
        #box{
            width:120px;
            font-family: "宋体";
            font-size: 12px;
            overflow: hidden;
            margin-top: 20px;
            margin-left: 100px;
            float: left;
        }
         #Abox{
             position:absolute;
             left:150px;
            width:120px;
            font-family: "宋体";
            font-size: 12px;
            overflow: hidden;
            margin-top: 120px;
            margin-left: 200px;
            float: left;
        }
        #hole {
            height: 300px;
            width: 500px;
            float: left;
        }    .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;
        }
          #Aitems{
            border:1px solid black;
            width:98px;
            display:none;
            float: left;
        }
        .box3{
            width:96px;
        }    .over{
            background-color:#0066CC;
            font-weight:bold;
            color:#FFF;
            /*border-top:1px dotted black;
            border-bottom:1px dotted black;*/
            cursor:pointer;
            width: 96px;
        }
    </style>
    <script type="text/javascript">
        var oDiv0;
        var oDiv1;
        var oDiv;
        var oDiv0A;
        var oDiv1A;
        var oDivA;
        window.onload=function(){
            oDiv0=document.getElementById("box0");
            oDiv1=document.getElementById("box1");
            oDiv=document.getElementById("items");
            oDiv0A=document.getElementById("Abox0");
            oDiv1A=document.getElementById("Abox1");
            oDivA=document.getElementById("Aitems");
            oDiv1.onclick=function(){
                oDiv.style.display=oDiv.style.display=="block"?"none":"block";
                show();
            }
            oDiv1A.onclick=function(){
                oDivA.style.display=oDivA.style.display=="block"?"none":"block";
                showA();
            }
        }   
        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);
                }
            }
        }
         function showA(){
            for(var i=0;i<oDivA.childNodes.length;i++){
                oDivA.childNodes[i].onmouseover=function(){
                    this.className="over";
                }
                oDivA.childNodes[i].onmouseout=function(){
                    this.className="";
                }
                oDivA.childNodes[i].onclick=function(){
                    oDiv0A.innerHTML=this.innerHTML;
                    hide(this);
                }
            }
        }
    </script>
    <body>
        <div id="hole">        <div id="box">
                <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 class="box3">湖北</div>
                    <div class="box3">武汉</div>
                    <div class="box3">孝感</div>
                    <div class="box3">枝江</div>
                </div>
            </div>
            <div id="Abox">
                <div id="Abox0" class="box0">不限</div>
                <div id="Abox1" class="box1"><img src="file:///D|/city/images/select2_12.gif" width="18" height="21"></div>
                <div id="Aitems" style="">
                    <div class="box3">湖北</div>
                    <div class="box3">武汉</div>
                    <div class="box3">孝感</div>
                    <div class="box3">枝江</div>
                </div>
            </div>
        </div>
        <!----></body>