`

解决SELECT框中文字过长的方法

 
阅读更多

前几天在工作的时候,测试提了个BUG,我们的系统有很多的地方用的SELECT框把框中的信息给遮挡了,为了解决这个问题想了很多方法,一开始想弄一个横向的滚动条,可是网上给出的资料很少,于是想到用一个小TIP信息来提醒是不是也可以呢,所以写了以下的代码:

var oP=window.createPopup();
var oPopBody;

function showTip(Sobj){
var Sindex = Sobj.selectedIndex;
if(Sindex>=0){
var Svalue = Sobj.options[Sindex].text;
var Slen = Svalue.length*10;
oPopBody= oP.document.body;
oPopBody.style.background="#fdfce9";
oPopBody.style.border="solid black 1px";
oPopBody.innerHTML="<div style='font-family:Arial;font-size:12px;'>"+Svalue+"</div>";
if(Slen>90){
oP.show(window.event.clientX+10,window.event.clientY+10,Slen+40,20,document.body);
}
}
}

function hideTip(Sobj){
if(oP.isOpen){
oP.hide();
}
}

以下为JSP代码:

<select name="seeit" size="5" style="overflow-x:scroll;width:100" onclick="showTip(this)" onmouseout= "hideTip(this)">
<option title="html中的文字太长,列表框中显示不完整,麻烦大家了" value="f">html中的文字太长,列表框中显示不完整,麻烦大家了</option>
<option title="听说是用js代码实现,麻烦给个例子,谢谢 " value="d" style="width:auto">听说是用js代码实现,麻烦给个例子,谢谢 </option>
<option title="或者鼠标指在某条上,显示完整的文字也行">或者鼠标指在某条上,显示完整的文字也行</option>
<option title="或者鼠标指在某条上,显示完整的文字也行">或者鼠标指在某条上,显示完整的文字也行</option>
<option title="或者鼠标指在某条上,显示完整的文字也行">或者鼠标指在某条上,显示完整的文字也行</option>
<option title="或者鼠标指在某条上,显示完整的文字也行">或者鼠标指在某条上,显示完整的文字也行</option>
<option title="或者鼠标指在某条上,显示完整的文字也行">或者鼠标指在某条上,显示完整的文字也行</option>
</select>

好了,一切搞定!

分享到:
评论

相关推荐

    layui下拉列表select实现可输入查找的方法

    如下图,这是一个layui的下拉列表select,随着下拉数据越来越多,我们找...以上这篇layui下拉列表select实现可输入查找的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

    vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

    主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本

    数据库开发框架(PDF版)

    *NEW:在界面上按回车跳转的功能,遇到TDBMEMO等就不应该再跳了*NEW:在SELECT_FORM中,搜索栏位选择中,不再出现隐藏的字段了*NEW:SELECT_FORM中的MEMO字段要显示出文字*TODO:如果有把DataSet中的字段拉出来,变成文本框...

    jQuery攻略.pdf

    314 10.20 使文字围绕图片显示 316 10.21 在图片背后放置阴影 317 10.22 当鼠标移过链接的时候改变鼠标样式 319 10.23 在指定的区域中显示长文字 320 10.24 创建圆角的栏 322 10.25 应用文字装饰 323 10.26 缩放图片...

    表单元素和文字垂直居中对齐问题解决整理

    表单页面,为了使表单元素和文字都垂直居中对齐,加个样式input,select{vertical-align:middle},文本框和下拉框都没问题,但是单选框和复选框就杯具了。 大多表现:单选,复选和文字无间距,单选文字偏上,复选偏上...

    解决layui的radio属性或别的属性没显示出来的问题

    3、解决方法就是:使用form.render() 刷新界面 layui.use('form',function(){ var form = layui.form; //刷新界面 所有元素 form.render(); }); 4、它还有另一种用法 form.render('radio') 这样它就只刷新 ...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例077 跳过数据输出中指定的记录 111 实例078 执行指定次数的循环 112 2.7 自定义函数 113 实例079 自定义函数截取中文字符串 113 实例080 公告标题的截取 114 实例081 论坛内容的简短输出 116 实例082 自定义函数...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例077 跳过数据输出中指定的记录 111 实例078 执行指定次数的循环 112 2.7 自定义函数 113 实例079 自定义函数截取中文字符串 113 实例080 公告标题的截取 114 实例081 论坛内容的简短输出 116 实例082 自定义函数...

    CoolMenu

    全面推出3.0版,代码进行了彻底优化,可以自定义设置前、背景色,字体、字号,快捷键实现方法全面重新设计,修正了以前版本中一旦出现冲突就会崩溃的错误;风格自定义,数十种可以自定义的颜色;;;;高亮条可以有四种...

    excel的使用

    合并不同单元格的内容,还有一种方法是利用CONCATENATE函数,此函数的作用是将若干文字串合并到一个字串中,具体操作为“=CONCATENATE(B1,C1)”。比如,假设在某一河流生态调查工作表中,B2包含“物种”、B3包含...

    Visual.Basic.2010.&.NET4.高级编程(第6版)-文字版.pdf

    高级编程(第6版)-文字版.pdf 第I部分 语言结构和环境 第1章 visual studio 2010 3 1.1 visual studio 2010:从express到ultimate的各种版本 4 1.2 visual basic的关键字和语法 7 1.2.1 控制台应用程序 10 ...

    vfp6.0系统免费下载

    问题 2-7: 我的 Visual FoxPro 5.0 表单中包含有 ListView 或 TreeView 控件,它们不继承其新版本中的最新功能(如支持复选框)。已发布的应用程序中,由于带有这些表单,而在最终用户的机器上出现表单 OLE 错误,...

    amis前端低代码框架-其他

    amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以节省页面开发工作量,极大...Select 组件自定义菜单模式下无法全选问题修复 Number 最大最小值校验问题修复 sdk 中 dialog 里的编辑器弹窗被遮挡问题修复

    数据库查询、分析工具 - 1.0.0.7 20190616

    如果您想要输入一个很长很复杂的命令,可以再按‘LongSQL’按钮,会弹出一个可以输入多行文字的新输入窗口,然后就可以在其中输入多行命令。 换行: 在这个输入控件中,直接按回车就是换行,如果按 Ctrl+回车 则...

    C++MFC教程

    在MFC中对消息的处理利用了消息映射的方法,该方法的基础是宏定义实现,通过宏定义将消息分派到不同的成员函数进行处理。下面简单讲述一下这种方法的实现方法: 代码如下 BEGIN_MESSAGE_MAP(CMainFrame, CFrameWnd...

    Visual C++ 数据库系统开发完全手册.part2

    12.3.3 在插入命令中使用SELECT 12.4 更新命令UPDATE 12.4.1 UPDATE命令简介 12.4.2 简单的UPDATE命令 12.4.3 在UPDATE更新命令中使用子查询 12.5 删除命令DELETE 12.5.1 DELETE命令简介 12.5.2 简单的DELETE命令 ...

    Visual C++ 数据库系统开发完全手册.part1

    12.3.3 在插入命令中使用SELECT 12.4 更新命令UPDATE 12.4.1 UPDATE命令简介 12.4.2 简单的UPDATE命令 12.4.3 在UPDATE更新命令中使用子查询 12.5 删除命令DELETE 12.5.1 DELETE命令简介 12.5.2 简单的DELETE命令 ...

Global site tag (gtag.js) - Google Analytics