css+js模拟可变长度下拉选择框/下拉选项长度过长时可换行显示 -

fenhonghai

浏览: 15382 次
性别:
来自: 杭州

最近访客更多访客>>

luoyonghui55

wangtao1727

nafengye

pzhu424

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

css+js模拟可变长度下拉选择框/下拉选项长度过长时可换行显示

博客分类：

CSS PHP HTML

准备一张图片名称为1.gif
与此html放在同一路径下，打开此HTML即可看见效果

此代码也适用于动态加载下拉列表数据，具体方法可具体分析，也欢迎大家来与我讨论。
php中已试用过。

<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:100%;
cursor:default;
}

</style>

<script>
function moveon(obj){
obj.background = "i.gif";
obj.style.color = "#FFFFFF";
}

function out(obj){
obj.background = "";
obj.style.color = "";
}

function selected(textobj,obj,divobj){
document.getElementById(textobj).value=obj.firstChild.nodeValue;
document.getElementById(divobj).style.display="none";
}


function showdiv(obj){
document.getElementById(obj).style.display="";
}


function showdiv_here(listid,obj,num){

if(num>15){
document.getElementById(listid).style.overflowY="scroll";
document.getElementById(listid).style.height = num*15;
}else{
document.getElementById(listid).style.overflowY="hidden";
document.getElementById(listid).style.height = num*24;
}
document.getElementById(obj).style.display="";

}

function leave(divobj){
document.getElementById(divobj).style.display="none";
}
</script>

</head>

<body cellspacing=0 cellpadding=0> 


<table border=1>
<tr>
<td>列表中的项目小于15的时候，不显示滚动条，列表框高度自适应</td>
<td>
<input type="text" id="name1" value="" onclick="showdiv_here('listdiv','showlist1',4);"  enable="false" onblur="leave('showlist1');"></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">
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name1',this,'showlist1')">123456789123456789123456789123456789123456789123456789</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name1',this,'showlist1')">1ssssssssssssssssssssssssssssssssssssssssssssss</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name1',this,'showlist1')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name1',this,'showlist1')">3</td></tr></table>
</div>
     </td>
   </tr>
</table>
     </td>
   </tr>
</table>
</div >
</div>
</td>
</tr>

<tr>
<td>超过15项之后自滚动条显示</td>
<td>
<input type="text" id="name3" value="" onclick="showdiv_here('listdiv3','showlist3',17);"  enable="false" onblur="leave('showlist3');"></input>
<div id="A" style="position:relative">

<div id="showlist3" 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="listdiv3" class="div_1">
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">22222222222222222111111111111</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">3</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')"></td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">3</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')"></td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">3</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">1</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')"></td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">2</td></tr></table>
<table class="table_1"><tr class="tr_1"><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name3',this,'showlist3')">3</td></tr></table>
</div>
     </td>
   </tr>
</table>
     </td>
   </tr>
</table>
</div >
</div>
</td>
</tr>

<tr>
<td>项目文本过长时，分行显示</td>

<td>
<input type="text" id="name" value="" onclick="showdiv('showlist');"  enable="false" onblur="leave('showlist');"></input>
<div id="A" style="position:relative">

<div id="showlist" style="display:none;width:300px;position:absolute;left:0px;top:0px" >
<table style="width:100%;" border=0 cellspacing=0 cellpadding=1>
   <tr>
     <td bgcolor="#000000">
<table style="width:100%" bgcolor="#FFFFFF" border=0 cellspacing=0 cellpadding=0>
   <tr>
     <td>
<div class="div_1">
<table class="table_1" style="word-break:break-all;"><tr><td  onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name',this,'showlist')">123456789123456789123456789123456789123456789123456789</td></tr></table>
<table class="table_1"><tr><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name',this,'showlist')">1ssssssssssssssssssssssssssssssssssssssssssssss</td></tr></table>
<table class="table_1"><tr><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name',this,'showlist')">2</td></tr></table>
<table class="table_1"><tr><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name',this,'showlist')">3</td></tr></table>
<table class="table_1"><tr><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name',this,'showlist')">4</td></tr></table>
<table class="table_1"><tr><td onmouseover='moveon(this)' onmouseout='out(this)'
             onMouseDown ="selected('name',this,'showlist')">5</td></tr></table>
</div>
     </td>
   </tr>
</table>
     </td>
   </tr>
</table>
</div >
</div>
</td>
</tr>
</table>

</body>
</html>

下拉按钮和具体的下拉列表的事件处理，大家完善一下就可以用了。

分享到：

css+div模拟下拉列表选择框------完整版 | PHP学习---变量使用总结

2009-06-10 14:45
浏览 2429
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css+js模拟可变长度下拉选择框/下拉选项长度过长时可换行显示

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css+js模拟可变长度下拉选择框/下拉选项长度过长时可换行显示

评论

发表评论

相关推荐

js 精华

编辑表格对象

event keycode 大全

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

最近访客更多访客>>