css+div模拟下拉列表选择框------完整版
此控件唯一不足的就是下拉列表之间有间距，
哪位有好的办法消除html控件间的间距（不是控件内的间距哦，而是像一个button和另一个button纵向排列之后两个控件之间的上下间隔）欢迎讨论！
代码如下，
1.jpg为蓝色纯色图片，您可以做的跟下拉列表默认的颜色一样，运行即可见效果，效果图见附件
关键代码解析：
此函数可以根据自己的需要进行调节，
1，其中的15表示下拉列表最多显示的项目数，超过15就显示滚动条
2，30表示下拉项目最多字符数，如果有的项目超过超过了30个字符就让控件自适应，及可自动拉伸，如果小于30个字符，则控件长度显示wei200px（可自行调节，这样做是为了避免选项过短控件显示不够宽的情况）
3，参数num,width是需要经过计算之后才能确定的，所以此控件的使用还是有一定的局限性，如果有哪位能有好的办法让控件最小宽度固定（不用判断数据长度），并在文本过长的情况下自适应，欢迎讨论
最新更新
下列列表框模拟，附图片，功能介绍：
1，有下拉选择按钮，
2，选项文字长度超过控件长度时，控件自动拉伸。
3，项目数超过固定项目数时，会显示下拉列表框的滚动条。
有好的建议或者有疑问欢迎来函！
哪位有好的办法消除html控件间的间距（不是控件内的间距哦，而是像一个button和另一个button纵向排列之后两个控件之间的上下间隔）欢迎讨论！
代码如下，
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style>
.div_1{
height:100;
overflow-x:hidden;
overflow-y:scroll;
cellspacing:0px;
cellpadding:0px;
}
.table_1{
top:0px;
width:100%;
heigth:20;
border:1;
font-size:14px;
cellspacing:0px;
cellpadding:0px;
}
.tr_1{
heigth:20;
width:300px;
cursor:default;
}
</style>
<script>
function moveon(obj,objtext,objin){
obj.background = "i.jpg";
obj.style.color = "#FFFFFF";
obj.style.border= 1;
document.getElementById(objin).onblur ="";
}
function out(obj,objtext,objin){
obj.background = "";
obj.style.color = "";
document.getElementById(objin).focus();
document.getElementById(objin).onblur =function anonymous(){leave(objtext);};
}
function divmoveon(objtext,objin){
document.getElementById(objin).onblur ="";
}
function divout(objtext,objin){
document.getElementById(objin).focus();
document.getElementById(objin).onblur =function anonymous(){leave(objtext);};
}
function selected(textobj,obj,divobj){
document.getElementById(textobj).value=obj.firstChild.nodeValue;
document.getElementById(divobj).style.display="none";
}
function showdiv_here(listid,obj,num,width){
if(num>15){
document.getElementById(listid).style.height = 22*15;
}else{
document.getElementById(listid).style.overflowY="hidden";
document.getElementById(listid).style.height = num*22;
}
if(width<30){
document.getElementById(listid).style.width=200;
}
document.getElementById(obj).style.display="";
}
function leave(divobj){
document.getElementById(divobj).style.display="none";
}
</script>
</head>
<body >
<table border=1>
<tr><td>hello</td>
<td><input type="text" id="name1" readonly="true" value="" onclick="showdiv_here('listdiv','showlist1',18,12);" enable="false" ></input>
<div id="A" style="position:relative">
<div id="showlist1" style="display:none;position:absolute;left:0px;top:0px">
<table border=0 cellspacing=0 cellpadding=1>
<tr><td bgcolor="#000000">
<table bgcolor="#FFFFFF" border=0 cellspacing=0 cellpadding=0>
<tr><td>
<div id="listdiv" class="div_1" onMouseDown ="divmoveon('showlist1','name1')" onmouseover="divmoveon('showlist1','name1')" onmouseout="divout('showlist1','name1')">
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">3</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">4</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">5</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">6</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">3</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">4</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">5</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">6</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">4</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">5</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover="moveon(this,'showlist1','name1')" onmouseout="out(this,'showlist1','name1')"
onclick ="selected('name1',this,'showlist1')">6</td></tr></table>
</div>
</td></tr></table>
</td></tr></table>
</div ></div>
</td></tr></table>
</body>
</html>
1.jpg为蓝色纯色图片，您可以做的跟下拉列表默认的颜色一样，运行即可见效果，效果图见附件
关键代码解析：
function showdiv_here(listid,obj,num,width){
if(num>15){
document.getElementById(listid).style.height = 22*15;
}else{
document.getElementById(listid).style.overflowY="hidden";
document.getElementById(listid).style.height = num*22;
}
if(width<30){
document.getElementById(listid).style.width=200;
}
document.getElementById(obj).style.display="";
}
此函数可以根据自己的需要进行调节，
1，其中的15表示下拉列表最多显示的项目数，超过15就显示滚动条
2，30表示下拉项目最多字符数，如果有的项目超过超过了30个字符就让控件自适应，及可自动拉伸，如果小于30个字符，则控件长度显示wei200px（可自行调节，这样做是为了避免选项过短控件显示不够宽的情况）
3，参数num,width是需要经过计算之后才能确定的，所以此控件的使用还是有一定的局限性，如果有哪位能有好的办法让控件最小宽度固定（不用判断数据长度），并在文本过长的情况下自适应，欢迎讨论
最新更新
下列列表框模拟，附图片，功能介绍：
1，有下拉选择按钮，
2，选项文字长度超过控件长度时，控件自动拉伸。
3，项目数超过固定项目数时，会显示下拉列表框的滚动条。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style>
.div_1{
height:100;
overflow-x:hidden;
overflow-y:scroll;
z-index:3;
}
.btn_1{
border:none;
background-image:url(but_out.jpg);
cursor:default;
width:16px;
height:18px;
background-repeat:no-repeat;
}
.btn_2{
border:none;
background-image:url(but_over.jpg);
cursor:default;
width:16px;
height:18px;
background-repeat:no-repeat;
}
.s_table_1{
BORDER:#7F9DB9 1px solid;
width:180px;
cursor:default;
}
.s_table_2{
top:0px;
width:100%;
border:none;
font-family:Arial, "ＭＳ Ｐゴシック",sans-serif;
font-size:12px;
cellPadding:0;
cellSpacing:0;
}
.tr_1{
width:178px;
cursor:default;
white-space:nowrap;
}
.text_1{
width:161px;
height:16px;
cursor:default;
BORDER:0px;
font-family:Arial, "ＭＳ Ｐゴシック",sans-serif;
font-size:12px;
}
.div_A{
position:relative
}
.div_B{
position:absolute;
left:0px;
top:0px;
}
</style>
<script>
var CBB_TEXTBOX = "_index";
var CBB_TEXTHIDDEN = "_no";
var CBB_SHOWDIV = "_showdiv";
var CBB_LISTDIV = "_listdiv";
var CBB_LISTTABLE = "_table";
function div_move_over(obj){
document.getElementById(obj+CBB_TEXTBOX).onblur ="";
}
function div_move_out(obj){
document.getElementById(obj+CBB_TEXTBOX).onblur =function anonymous(){hidden_listbox(obj+CBB_SHOWDIV)};
document.getElementById(obj+CBB_TEXTBOX).focus();
}
function option_move_over(obj,objin){
obj.background = "option_blue.jpg";
obj.style.color = "#FFFFFF";
document.getElementById(objin+CBB_TEXTBOX).onblur ="";
}
function option_move_out(obj,objin){
obj.background = "";
obj.style.color = "";
document.getElementById(objin+CBB_TEXTBOX).onblur =function anonymous(){hidden_listbox(objtext+CBB_SHOWDIV);};
document.getElementById(objin+CBB_TEXTBOX).focus();
}
function option_clicked(obj,objin){
if(obj.firstChild){
document.getElementById(objin+CBB_TEXTBOX).value=obj.firstChild.nodeValue;
if(obj.value=='add'){
document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].value = "";
document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].id = "";
}else{
document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].value = obj.value;
document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].id = obj.firstChild.nodeValue;
}
}else{
document.getElementById(objin+CBB_TEXTBOX).value="";
document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].value = "";
document.getElementsByName(objin+CBB_TEXTHIDDEN)[0].id = "";
}
document.getElementById(objin+CBB_SHOWDIV).style.display="none";
}
function show_listbox(obj){
var trobj = document.getElementById(obj+CBB_LISTTABLE).rows;
var rowsNum =trobj.length;
var optionNum = 3;
var optionHeigth = 16;
document.getElementById(obj+CBB_LISTDIV).style.width=178;
if(rowsNum>optionNum){
document.getElementById(obj+CBB_LISTDIV).style.height = optionHeigth*optionNum;
}else{
document.getElementById(obj+CBB_LISTDIV).style.overflowY="hidden";
document.getElementById(obj+CBB_LISTDIV).style.height = rowsNum*optionHeigth;
}
document.getElementById(obj+CBB_SHOWDIV).style.display="";
document.getElementById(obj+CBB_TEXTBOX).focus();
}
function show_listbox(obj){
var trobj = document.getElementById(obj+CBB_LISTTABLE).rows;
var rowsNum =trobj.length;
var optionWidth = 178;//项目宽度/下列列表框的默认宽度
var optionNum = 3; //列表框最多可显示项目数
var optionHeigth = 16;//项目的高度
var roolBarWidth = 18;//纵向滚动条的宽度
//var charSize = 6.2;//字符宽度，如需要精确计算宽度，可去掉注释。
for(var i=0;i<rowsNum;i++){
if(trobj[i].firstChild.firstChild){
str = trobj[i].firstChild.firstChild.nodeValue;
document.getElementById("p1").innerHTML = trobj[i].firstChild.firstChild.nodeValue;
piwidth = document.getElementById("p1").offsetWidth+roolBarWidth;
document.getElementById("p1").innerHTML ="";
// if(piwidth<window.document.body.clientWidth){
if(optionWidth<piwidth){
optionWidth = piwidth;
if(optionWidth>580){
len = 0;
for(j=0;j<str.length;j++)
{
iCode = str.charCodeAt(j);
if((iCode>=0 && iCode<=255)||(iCode>=0xff61 && iCode<=0xff9f)){
len += 1;
}
else{
len += 2;
}
}
if(len*charSize>optionWidth){
optionWidth = len*charSize;
}
}
}
}
}
document.getElementById(obj+CBB_LISTDIV).style.width=optionWidth;
if(rowsNum>optionNum){
document.getElementById(obj+CBB_LISTDIV).style.height = optionHeigth*optionNum;
}else{
document.getElementById(obj+CBB_LISTDIV).style.overflowY="hidden";
document.getElementById(obj+CBB_LISTDIV).style.height = rowsNum*optionHeigth;
}
document.getElementById(obj+CBB_SHOWDIV).style.display="";
document.getElementById(obj+CBB_TEXTBOX).focus();
}
function hidden_listbox(divobj){
document.getElementById(divobj).style.display="none";
}
function btn_over_img(obj){
obj.className ="btn_2";
}
function btn_out_img(obj){
obj.className ="btn_1";
}
</script>
</head>
<body >
<span id="p1"></span>
******************************************************************************<p>
<table class='s_table_1' onclick="show_listbox('search');" cellspacing=0 cellpadding=0 >
<tr><td><input type='text' id='search_index' class='text_1' readOnly onclick="show_listbox('search');" onblur="hidden_listbox('search_showdiv')" value='selectedvalue'><input type='button' id='btna2' class='btn_1' onclick="show_listbox('search')" onmouseover='btn_over_img(this);' onmouseout='btn_out_img(this);'><input type='hidden' name='search_no' value='selectedid' id='selectedvalue'><td></tr></table>
<div class='div_A' border=1 >
<div id='search_showdiv' class='div_B' style='display:none;border:1' onmouseover="div_move_over('search');" onmouseout="div_move_out('search');">
<table border=0 cellspacing=0 cellpadding=1><tr><td bgcolor='#000000'>
<table bgcolor='#FFFFFF' border=0 cellspacing=0 cellpadding=0><tr><td>
<div id='search_listdiv' class='div_1''>
<table id='search_table' class='s_table_2' cellspacing=0 cellpadding=0>
<!--select_top-->
<!--option-->
<tr class='tr_1' ><td style='white-space:nowrap;' height='16' value='1' onmouseover="option_move_over(this,'search');" onmouseout="option_move_out(this,'search')" onclick ="option_clicked(this,'search');">1</td></tr>
<tr class='tr_1' ><td style='white-space:nowrap;' height='16' value='1' onmouseover="option_move_over(this,'search');" onmouseout="option_move_out(this,'search')" onclick ="option_clicked(this,'search');">1</td></tr>
<tr class='tr_1' ><td style='white-space:nowrap;' height='16' value='1' onmouseover="option_move_over(this,'search');" onmouseout="option_move_out(this,'search')" onclick ="option_clicked(this,'search');">1</td></tr>
<tr class='tr_1' ><td style='white-space:nowrap;' height='16' value='1' onmouseover="option_move_over(this,'search');" onmouseout="option_move_out(this,'search')" onclick ="option_clicked(this,'search');">155555555555555555555555555555555555555555555555555555555</td></tr>
<!--option-->
</table></div></td></tr></table></td></tr></table></div></div>
</body>
</html>
有好的建议或者有疑问欢迎来函！