div模拟下拉框的Demo

最新推荐文章于 2023-03-14 14:55:17 发布

xiaoyi3317

最新推荐文章于 2023-03-14 14:55:17 发布

阅读量184

点赞数

文章标签： CSS XHTML HTML

本文链接：https://blog.csdn.net/xiaoyi3317/article/details/83681466

版权

前两天在项目中碰到一个问题，在原图中下拉框的高度蛮高的，而用select下拉框，它的高度不够高，于是想控制它的样式，用了height，谁知道在IE6 7 下不可行。网上找了一下，方案有两种，一种是改变下拉框里面字体的大小，当字变大时，下拉框亦会变高，即控制下font-size就好了，第二种是用div+css+js来模拟下拉框，当然它的缺陷是没有像下拉框那样有value值，传值的时候不是太方便。我采用了第二种方案，代码如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript" type="text/javascript">
    function show_select(input,btn,option,value){
	  inputobj=document.getElementById(input);
	  btnobj=document.getElementById(btn);
	  optionobj=document.getElementById(option);
	  valueobj=document.getElementById(value);
	  optionobj.style.display=optionobj.style.display==""?"none":"";
	  optionobj.onblur=function () {
	    optionobj.style.display="none";
	  }

	  for (var i=0;i<optionobj.childNodes.length;i++){
	    optionobj.focus();
	    optionobj.childNodes[i].onmouseover=function (){
		this.className="qty_items_over";
		}
		optionobj.childNodes[i].onmouseout=function (){
		this.className="qty_items_out";
		}
		optionobj.childNodes[i].onclick=function () {
		//alert(this.innerHTML)
		inputobj.innerHTML=this.innerHTML;
		valueobj.value=this.innerHTML;
		optionobj.blur();
		optionobj.style.display="none";
		if (input=="pro_color"){
		  loadpic(this.id,"");
		}
		}
	  }
	}
  </script>
<style type="text/css">
body{
font-size:12px;
font:12px Arial, Helvetica, sans-serif;
}
.pro_select{
   width:91px;
   height:24px;
}
#pro_qty{
float:left;
height:22px;
width:65px;
text-align:center;
border-top:1px solid #B7D1EA;
border-bottom:1px solid #B7D1EA;
border-left:1px solid #B7D1EA;
line-height:22px;

}
#pro_qty_but{
float:left;
width:25px;
cursor:pointer;}
/*子项*/
#qty_items{
clear:left;
width:86px;
border-right:1px solid #B7D1EA;
border-bottom:1px solid #B7D1EA;
border-left:1px solid #B7D1EA;
position:absolute;
z-index:80;
}
.qty_items_out {
background-color:#FFFFFF;
margin-left:20px;
cursor:pointer;
line-height:22px;
}
.qty_items_over{
background-color:#CCCCCC;
cursor:pointer;
line-height:22px;
text-indent:20px;
}
.clear{
clear:left;}
</style>
</head>
<body>
   <div class="pro_select">
  <div id="pro_qty">企 业</div>
<div id="pro_qty_but" onclick="show_select('pro_qty','pro_qty_but','qty_items','qty')">
<img src="img/xiala.jpg" width="22" height="24" /></div>
  <div class="clear"></div>
  <div id="qty_items" style="display:none">
   <div class='qty_items_out'>企 业</div>
   <div class='qty_items_out'>产 品</div>
  </div>
  </div>
  <form id="form1" name="form1" method="post" action="">
  <input name="qty" type="hidden" id="qty" value="1" />
  </form>
</body>
</html>

这个代码在理解上不成什么问题的，大家可以在这个的基础上进行修改，来达到自己想要的效果！

xiaoyi3317

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div模拟下拉框的Demo

前两天在项目中碰到一个问题，在原图中下拉框的高度蛮高的，而用select下拉框，它的高度不够高，于是想控制它的样式，用了height，谁知道在IE6 7 下不可行。网上找了一下，方案有两种，一种是改变下拉框里面字体的大小，当字变大时，下拉框亦会变高，即控制下font-size就好了，第二种是用div+css+js来模拟下拉框，当然它的缺陷是没有像下拉框那样有value值，传值的时候不是太...
复制链接

扫一扫