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

最新推荐文章于 2021-08-03 23:57:06 发布
最新推荐文章于 2021-08-03 23:57:06 发布
阅读量391 收藏
点赞数 1
分类专栏： 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>



下拉按钮和具体的下拉列表的事件处理，大家完善一下就可以用了。
夷陵小妞
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 内容太长,css中内容过长怎么解决
weixin_34093899的博客
08-03 889
大家在写css的时候，肯定有过忘记设计里面存在的临界的情况。举个例子来说吧，当内容的长度超过了我们的期望值，我们也无法解释其中的可能性，页面的设计很可能会因此而崩掉。我们不能保证css总是会按照我们期望的那样工作，但至少我们可以用不同类型的内容来测试，以减少这种情况的发生。具体情况如下：一个右侧/左侧有小图标的按钮这是一个手风琴效果的开关按钮。按钮右侧有一个小图标用来强调它是可点击的。然而当按钮的...
js+css实现可搜索的下拉选择框插件
最新发布
05-09
为了解决这个问题，我们可以使用"js+css实现可搜索的下拉选择框插件"，它结合了jQuery和CSS技术，提供了一个高效、易用的解决方案，使用户可以通过输入关键字快速查找所需选项。 这个插件的实现基于JavaScript的...
DIV+CSS+JS仿Select下拉表单
01-04
DIV+CSS+JS仿Select下拉表单 下拉表单
css输入框内容过长怎么隐藏,input下拉框内容过长被隐藏显示，部分机型无法进行滑动显示。...
weixin_36257834的博客
08-03 700
input下拉框内容过长被隐藏显示，部分机型无法进行滑动显示。<li><div class="item-content"><div class="item-inner"><div class="item-title label">户口所在地</div><div class="item-input"><input clas...
JavaScript动态添加和修改Select下拉框
kaidishi的专栏
07-25 2803
1使用DOM对象 var s=document.getElementById("theYear");//获取需要添加的select            var year=new Date();//获取当前时间            var number=0;//从第0个开始添加            for(var i=1990;i               var opti
HTML下拉菜单为什么无线拉长,【CSS】怎么拉长一个div的高度
weixin_39554891的博客
06-07 265
请看技巧与提示的那里,由于文字不是很多,导致在大屏幕上,这个div太短了,现在页面有点难看,但是在比较小的屏幕(笔记本屏幕),效果还是可以的,这个该怎么决解呢?我希望的效果如下回答：$(".divClassName").css("height",$(document).height());这样可以定义某个div的高度跟页面大小一致，如果用js，注意以下问题:document.body.client...
原生JS实现自定义下拉单选选择框功能
10-17
在本文中，我们将探讨如何使用原生JavaScript实现一个自定义的单选下拉选择框功能。这个组件通常用于提供用户友好的交互界面，允许用户在一组预设的选项中进行选择。由于浏览器自带的下拉框样式不统一且可能不符合UI...
JS+CSS美化经典Select选项框插件
07-03
为了改善这一情况，开发者们通常会利用JavaScript（JS）和层叠样式表（CSS）来增强Select的视觉效果，创建出更加精美、自定义的选项框插件。本文将深入探讨如何使用JS和CSS来美化经典Select选项框。 首先，我们需要...
MVC4 Razor中的图像组合框/下拉菜单
04-07
图像组合框（Image ComboBox）或图像下拉菜单，是在传统下拉列表的基础上添加了图像元素，使得用户可以通过图片快速识别和选择选项。这对于需要展示大量相似选项的应用场景非常有用，如国家选择、语言选择等。 在...
Bootstrap+css+js实现微票儿
10-17
7. **插件集成**：Bootstrap有许多可扩展的插件，如日期选择器、模态框等，它们都是通过JS实现的。 总的来说，这个项目将带你深入理解Web开发的基础，并教会你如何使用Bootstrap来快速构建专业级的Web应用。通过...
移动端自定义下拉框【H5+js+css】
08-16
自定义下拉框 预览：https://blog.csdn.net/SangHongxv/article/details/81746014
js+css实现超简洁的二级下拉菜单效果代码
10-23
主要介绍了js+css实现超简洁的二级下拉菜单效果代码,通过非常简单的JavaScript遍历页面元素及动态设置样式达到二级下拉菜单的效果,具有一定参考借鉴价值,需要的朋友可以参考下
html+css+JavaScript实现淡入淡出下拉菜单
07-08
开始自己就想做一个属于自己的下拉菜单，从什么都不知道到最后成功设计出来了！程序简单易懂，适合初学者！
3种JS+CSS下拉菜单select美化代码
01-23
3种JS+CSS下拉菜单select美化代码
js动态修改下拉菜单的大小
飞雪迎春
01-05 487
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
js（dom选择器，尺寸类，属性操作）
dergfg的博客
01-16 290
保持对代码的热爱并保存怀疑态度 DOM 介绍 DOM：文档对象模型，document，提供了页面（网页，文档）的操作 标准化组织：W3C document表示页面，html结构，类似于树形结构（家族结构），页面由节点组成 页面上所有的成份都是节点 标签（元素）节点 文本节点 属性节点 注释节点 根节点 所有的节点都是对象类型的数据 如何操作网页，操作DOM，操作节点，哪个节点，选中其中一个↓↓↓ 选择器 元素节点选择器 单个对象： 就算有多个符合条件的元素存在，也只能选择一个 直接选择：id
JavaScript实例--网页跳转下拉框-JS修改表格内容-JS下拉框加元素
我是老伯的博客
07-17 904
一、JavaScript实例 1、需求：做一个下拉框，分别是河大，百度，京东。点哪个就直接跳转 <body> <select name="" id="ws"> <option value="http://baidu.com">百度</option> <option value="http://hbu.cn">河大</option> <option value="http://jd.com">京东</opti
js3——表格下拉
qq_44417051的博客
11-30 104
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常见事件</title></head><body><form action="#" id="form" onclick="checkForm...
原生js自定义下拉框
weixin_45162984的博客
11-26 1605
原生js自定义下拉框，可以设置下拉框中链接跳转，仅需在option中设置type为jump，设置url为跳转地址即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义下拉框se
Vue实现自定义下拉菜单：赫夫曼算法解析
"赫夫曼算法-vue实现自定义下拉菜单功能" 本文主要讨论的是赫夫曼算法在数据结构中的应用以及如何使用Vue框架来实现自定义下拉菜单功能。赫夫曼算法，也称为最优二叉树或最小带权路径长度（Minimum Weighted Path ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值