刚接触Web，写了个下拉列表插件，有BUG，请教大家指点

前端UI分享

;(function ($) {
    $.fn.DrowDowEditor = function (opts) {
        opts = jQuery.extend({
         panel:$(this),
         data: null }, opts || {});
        return this.each(function() {
         var panelID = opts.panel[0].id;
        //--------下拉容器--------------
        var dropdownPanelHtml = '<div id="drop_down_editor_panel' + panelID + '" style="border:1px solid #3471b0;  min-width:100px;  position:absolute;"></div>';
        $(dropdownPanelHtml).insertAfter(opts.panel);
        var dropdownPanel = $("#drop_down_editor_panel" + panelID);
        //------------------------------
        //使用DIV相对定位包着textbox和下拉容器
        var container = '<div style="position:reletive; background-color:red;" id="drop_down_editor_container' + panelID + '"></div>';
        $(container).insertBefore(opts.panel);
        var editorContainer = $("#drop_down_editor_container" + panelID);
        opts.panel.appendTo(editorContainer);
        dropdownPanel.appendTo(editorContainer);
        opts.panel.css("float", "left");
        //--------添加下拉按钮-------------
        var button = '<div style=" border: solid 1px #3471b0;border-left: none;padding: 4px;overflow: hidden; outline: none;width:12px; background-image:url(../../images/arr_right_blue.png); background-repeat:no-repeat; background-position:center;float:left; height:15px;"></div>';
        $(button).insertAfter(opts.panel);
        //---------------------------------
        dropdownPanel.css("top", "30px");
        dropdownPanel.css("left", "6px");
        dropdownPanel.hide();

        for (var i = 0; i < opts.data.length; i++) {

            var dataItem = '<div class="drop_item">' + opts.data[i].key + '</div>';
            dropdownPanel.append(dataItem);
        }

        dropdownPanel.find(".drop_item").click(function () {
            alert(opts.panel[0].id);
            opts.panel.val($(this).html());
        });
        $(".drop_item:odd").mouseenter(function () {
            $(this).css("background-color", "#3471b0");
        });
        $(".drop_item:odd").mouseleave(function () {
            $(this).css("background-color", "white");
        });
        $(".drop_item:odd").css("background-color", "white");
       opts. panel.click(function (e) {
            e.stopPropagation();
          
            dropdownPanel.width(opts.panel.width() + 15 + 14);
            dropdownPanel.slideDown(300);
        });

        $(document).click(function () {
            dropdownPanel.slideUp(300);
        });
          opts.panel.css("clear","both");
        });
    }
})(jQuery);

<div>
<input type="text" id="dropdown1" class="dropdownEditor" />
<div>123123</div>
<input type="text" id="dropdown" class="dropdownEditor" />
</div>

$("#dropdown").DrowDowEditor({
data: [{"key":"百度","value":"www.baidu.com"},{"key":"新浪","value":"www.sina.com.cn"},{"key":"测试","value":"test.com"},{"key":"博客园","value":"cnblog.cn"}]
});

$("#dropdown1").DrowDowEditor({
data: [{"key":"百度1","value":"www.baidu.com"},{"key":"新浪1","value":"www.sina.com.cn"},{"key":"test","value":"test.com"},{"key":"博客园1","value":"cnblog.cn"}]
});

 

效果：

 

 

如果只是渲染一个基本可以呈现出来，如果是多个，就产生覆盖问题了，

刚接触web，知识浅薄，希望大家多加指点。前端分享