续：自定义下拉框类型source（Select、checkbox多选、日期、树型）的说明

treeClimber

于 2009-08-07 14:48:00 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB开发技巧原创经典文章标签： javascript dropdown function import 测试

本文链接：https://blog.youkuaiyun.com/treeclimber/article/details/4422452

WEB开发技巧同时被 2 个专栏收录

26 篇文章

订阅专栏

原创经典

22 篇文章

订阅专栏

本文介绍了一种自定义下拉框组件的实现方法，并提供了示例代码。该组件支持多种选项类型，如普通文本、带样式的文本等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接上文，标题《自定义下拉框类型source（Select、checkbox多选、日期、树型）》在日期[TODO]、树型[TODO]处本来“TODO”字样，表示后两种是后续有待实现的功能，无奈被优快云截掉了。所以在此声明，不是有意要忽悠大伙。

下面给出测试代码：

/**import ElementUtils.js*/
function getOffsetPosition(src){
    var left=0, top=0;
    while (src.offsetParent){
        left += src.offsetLeft;
        top += src.offsetTop;
        src = src.offsetParent;
    }
    return new Point(left,top);
};
function Point(posX,posY){
   this.x = posX;
   this.y = posY;
   this.type = "Point";
}
/*import end*/

var dd = new Dropdown(document.getElementById("test"));
document.documentElement.onclick = function(){dd.hide();}
dd.setMultiple(true);
dd.setLoader("dd");
dd.addItem("ABCD", "1");
dd.addItem("<font color='red'>EFGH</font>", "2");
dd.addItem("IJKL", "3");
dd.addItem("MNOP", "4");
dd.addItem("QRST", "5");
dd.addItem("UVWX", "6");
dd.addItem("XZ", "7");
dd.selectedIndex = 2;
</script>