我们都知道,HTML的下拉框有点讨厌,它的宽度会随里面Option.text的长度变化而变化,所以我们经常为布局的需要,人为地固定它的宽度(style="width:xxx px"),但另一个问题就出来了:如果option的text相对与设定的宽度来讲过大,势必无法显示完全。以前的时候,我总会对两者难以取舍。
但是,鱼和熊掌真的不可兼得吗?通过我今天的一件事来回答它:Yes。
在项目中,我用iframe显示一个查询结果,这个iframe引用的页面只有一个可见的Select,它的数据取自数据库。这时,我小心地调整iframe的长宽和select的高度一致。为了解决第一个问题(显示:至少要有一个宽度),我在Select下面加了一个Option,其text为N个全角的“ ”,这样就解决了最小宽度的问题不至于让它缩成一个瘦死鬼:);第二个问题,我并没有用“style="width:xxx px"”固定宽度,这样,那它就能出现滚动条(呵呵,这个滚动条是iframe的),有了它,不就可以拉动着显示每一个完整的text吗?在高度上,我能够在页面上或JavaScript中得知此下拉框到底有多少个Option,从而再设置它的属性为size=Math.max(options.length, 25),其中25是我要布局的一个常数,这样的话,呵呵,下拉框自己的滚动条没出来,iframe的却出来了,这样不是很好吗?
先别得意,没完呢,我不是在末尾加了一个text为空白的option吗?所以,还得针对这个option给该下拉框定义onChange或ondblClick事件函数。之后,就完啦!
这只是一个过程的描述,我今天的事情就是这样解决的。对于这个实现,我将会用最简单的taglib形式写出来。有兴趣的人请先耐性等等,多关注!谢谢……(偷笑中)