从网上下载了一个源码,但是只有一个下拉框,我想做出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>
<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>
解决方案 »
- 问个javscript执行过程的问题,为什么程序会被提前执行。
- 请问为什么Jquery中的toggle()执行起来有问题?
- 简单的鼠标事件
- gbk文件中,怎么用js代码把 中国 转化成 %D6%D0%B9%FA 在线等
- 变量赋值始终为空!急~~!
- javascript模拟鼠标点击 不知道错在哪里
- 请帮忙修改我的更改字体代码,谢谢!!!!!!!!!!!!!!1顶者有分
- 一个简单的javascript程序问题 向大家讨教了
- 大家帮忙!身份证的表单检测代码(包括15位和18位的),能给我一份吗?
- 请问高手怎样才能实现判定客户端IE和netscape语言的版本,来打开不同的网页呢?谢谢!
- 难道是跨域操作???
- 应用comet时,怎么可以从服务器推复杂的内容到浏览器?
好的办法:自己搞明白代码的意思,用这个思路写一个通用的,然后加的时候会代码量少点,易读,以后再加减方便。