【实例名称】
JS代码实现不带滚动条的select
【实例描述】
默认的select控件,是通过下拉的形式提供选项,有时候为了页面布局,需要使用其中的滚动条。本例学习如何去掉select的滚动条,并显示select的所有选项。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-本站(www.xue51.com)</title> </head> <body> <select size="2" style="width:150px" name="mysel" style="overflow:hidden" multiple> <option>aaa</option> <option>bbb</option> <option>ccc</option> <option>ddd</option> <option>eee</option> <option>fff</option> </select> <script language="javascript"> document.all.mysel.size=document.all.mysel.options.length; //根据列表框内容改变列表框的高度 </script> </body> </html>
【运行效果】
【难点剖析】
本例,首先默认设置select的高度只能容纳两个选项。当select初始化并加载数据完成后,再使用“document.a11.mysel.options.1ength"获取select中选项的个数。最后设置“document.a11.mysel.size”为实际的选项个数。
【源码下载】
本实例JS代码下载
……