前两天在项目中碰到一个问题，在原图中下拉框的高度蛮高的，而用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>
这个代码在理解上不成什么问题的，大家可以在这个的基础上进行修改，来达到自己想要的效果！
分享到：
相关推荐
在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中，包含的就是这样一个基于`div`和jQuery的自定义下拉菜单解决方案。 首先，`demo.html`是演示页面，它展示了如何在实际项目中应用这个插件。这个页面会包含一...
在这里，开发者可能创建了一个或多个HTML元素，如`<div>`或`<ul>`，用于模拟下拉框和选项列表。通过DOM操作，可以动态地添加、删除或修改这些元素，实现下拉框的显示和隐藏。 2. **事件监听**：为了实现下拉框的...
在网页设计中，美工有时会因为HTML默认的`<select>`下拉框样式不符合设计需求，特别是默认的下拉箭头图标不美观，而选择使用JavaScript和CSS自定义一个模拟下拉框的效果。本示例是使用jQuery来实现这样一个功能，...
<div id="wrapper" class="iscroller"> <div id="pullDown"> <span class="pullDownIcon"></span> 下拉刷新... </div> <!-- 这里是你的滚动内容 --> </div> ``` 接下来，我们需要在JavaScript中初始化`iscroll...
推荐jQuery美化select下拉框样式漂亮效果 27.下载jQuery网页表单美化修饰插件(jQtransForm美化表单) 28.一款jquery实现表单输入提示的Autobox插件(基于jquery.ui) 29.一款美化表单下拉列表、复选框等的jquery ...
CheckboxSelect_v2.8.8的核心在于使用HTML、CSS和JavaScript构建一个模拟下拉框的效果。它通过创建一个隐藏的`<select>`元素来存储所有选项，同时创建一个自定义的UI，包含一个可点击的按钮和显示当前选中项的区域。...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，如表格、下拉框、对话框、菜单等，使得开发者能够快速构建出美观且功能丰富的Web应用界面。ExtJS则是另一个知名的JavaScript框架，它...
<div id="demo"> <my-select btn-name='search' v-bind:list='data1'></my-select> 搜索' v-bind:list='data2'> </div> ``` 接下来，我们关注Vue.js的组件系统。`my-select`作为父组件，它包含了输入框和一个用于...
例如，你可以用CSS控制下拉框的尺寸、颜色、字体等样式，并用JavaScript实现动画效果、事件监听以及动态加载选项等高级功能。 自定义下拉列表的一个常见方法是使用模拟下拉菜单，即用一个可点击的按钮或链接代替`...
`$("textarea").val()`用于获取textarea元素中的值，而`$("#input").val($(this).val())`则是设置id为'input'的input元素的值为下拉框(`#demo`)当前选中的值。 5. **条件判断**： `if($nei.length==""){...}`检查...