`
fenhonghai
  • 浏览: 15353 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

css+div模拟下拉列表选择框------完整版

    博客分类：
  • js
CSSJ# 
阅读更多
此控件唯一不足的就是下拉列表之间有间距，
哪位有好的办法消除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>



有好的建议或者有疑问欢迎来函！
  • 大小: 37.8 KB
  • 大小: 770 Bytes
  • 大小: 786 Bytes
  • 大小: 677 Bytes
0
顶
0
踩
分享到：
css+js模拟可变长度下拉选择框/下拉选项长 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics