(Truly原创) 一个漂亮好用的模拟下拉框

点击这里下载完整源代码

在Web开发中，为了追求界面上的美观，有时候我们需要改变一些控件的呈现外观，通常我们可以通过CSS很方便的达到所需效果，但是对于一些控件缺令Web开发人员非常伤脑筋，比如想要更改下拉框的边框或者下拉箭头的演示，用CSS就非常难实现，这时候只能靠程序代码对系统默认下拉框控件进行模拟，有很多模拟方式都可以达到这一目的，但是本文，笔者对众多方案进行深入研究和权衡后，提出一种性能卓越的解决方案：

请看实际效果：
请选择 第一项 Truly Abc

这个函数库的主要方法为
initSelect(id, width, height), 后面两个参数主要用于指定下拉框宽度和高度，可以省略。
setSelectByIndex(id, index)
setSelectByValue(id, value)

注1：使用时需要给页面的body增加onclick="HideSel(event);"以取消下拉框选择。

注2：有些方法是公用方法，请根据实际情况进行调整，比如gid函数。

如何使用：假设你的页面上面放置了DropDownLoad服务器控件或者是select控件，要达到模拟效果只需使用一行代码：

<script>initSelect('Demo_Select');</script>

而想要选中某个值只需要：

onclick="setSelectByIndex('Demo_Select', gid('ctrIndex').value);"

或者

onclick="setSelectByValue('Demo_Select', gid('ctrValue').value);"

非常的简单！

点击这里下载完整源代码（注：由于演示需要本页面内置的代码可能略有不同。）

演示文件使用了一个图片darrow.gif和一个select.css以及一个select.js文件。

select的核心代码如下：

}