Jquery下拉插件奇怪的行为

Question

我正在尝试为项目开发一个下拉插件。会发生什么： 当我只使用我的下拉列表的一个实例时，它就像一个魅力，但当我尝试使用多个时，无论我在哪里点击，总是最后插入的下拉组件有效。 从我理解的任何未知原因，按钮ID是混合的。所以如果有人能帮到你，你会很感激。

HTML：

    <div id="drop_mediaproject" style="width:220px; position:absolute; top:90px; left:28px;"></div>
    <div id="drop_mediaindustry" style="width:220px; position:absolute; top:130px; left:28px;"></div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#drop_mediaproject').pifo_dropdown({
                'width'         : 220, 
                'fontsize'      : 14, 
                'optfontsize'   : 13, 
                'defaultlbl'    : 'Select Media Project', 
                'maxheight'     : 100,
            }); 

            $('#drop_mediaindustry').pifo_dropdown({
                'width'         : 220, 
                'fontsize'      : 14, 
                'optfontsize'   : 13, 
                'defaultlbl'    : 'Select Industry', 
                'maxheight'     : 100
            }); 

            content_mediaproject = ['Select Media Project', 'blank', 'Sao Paulo', '1', 'Rio de Janeiro', '2', 'Belo Horizonte', '3', 'Brasilia', '4', 'Salvador', '5', 'Porto Alegre', '6'];
            content_industry = ['Select Industry', 'blank', 'Sao Paulo', '1', 'Rio de Janeiro', '2', 'Belo Horizonte', '3', 'Brasilia', '4', 'Salvador', '5', 'Porto Alegre', '6'];             


            $('#drop_mediaproject').pifo_dropdown('populate', content_mediaproject);
            $('#drop_mediaindustry').pifo_dropdown('populate', content_mediaindustry);

        });

    </script>

现在，JS：

(function( $ ) {
var settings = $.extend( {
  'width'               : 170,
  'maxheight'           : 80,
  'fontsize'            : 45,
  'optfontsize'         : 22,
  'defaultlbl'          : 'Select an option',
  'defaultvalue'        : 'blank',
});   

var objId = "";

var methods = {
    init : function( options ) {            
        settings = $.extend(options);    
        objId = this.attr("id");

        // DROPDOWN TEMPLATE            
        var dropdown_tpl = "<table border='0' cellpadding='0' cellspacing='0' width='"+(settings.width)+"'>";
        dropdown_tpl    += "    <tr>";
        dropdown_tpl    += "        <td valign='top'>";
        dropdown_tpl    += "            <div id='"+objId+"_label"+"' class='dropdown_label_off'  style='font-size:"+settings.fontsize+"px;'>"+settings.defaultlbl+"</div>";

        dropdown_tpl    += "        </td>";
        dropdown_tpl    += "        <td valign='top' width='30'>";
        dropdown_tpl    += "            <div id='"+objId+"_button"+"'class='dropdown_button' align='center'>";
        dropdown_tpl    += "                <img src='imgs/components/dropdown/arrow.png' border='0'>";
        dropdown_tpl    += "            </div>";
        dropdown_tpl    += "        </td>";
        dropdown_tpl    += "    </tr>";
        dropdown_tpl    += "</table>";
        dropdown_tpl    += "<div id='"+objId+"_stage' style='height:"+settings.maxheight+"px;' class='dropdown_stage'></div>";
        // END OF TEMPLATE

        this.html(dropdown_tpl);

        // DROPDOWN ADJUSTS
        // Stage
        stage_width       = $("#"+objId+"_label").width();
        stage_width      += $("#"+objId+"_button").width();
        $("#"+objId+"_stage").css('width', stage_width+ 10 + "px");
        // Height
        $("#"+objId+"_button").css('height', $("#"+objId+"_label").height() + 6);
        height = $("#"+objId+"_label").height();

        // DROPDOWN EVENTS
        $("#"+objId+"_button").bind('click', methods.handleStage);

        $(document).click(function() {
            $("#"+objId+"_stage").fadeOut(function() {
                $("#"+objId+"_label").removeClass("dropdown_label_on").addClass("dropdown_label_off");
            });

        })
    },

    handleStage: function(e) {
        alert(settings.objId);
        e.stopPropagation();
        if ($("#"+objId+"_stage").css("display") == "none") {
            $("#"+objId+"_stage").fadeIn(function() {
                $("#"+objId+"_label").removeClass("dropdown_label_off").addClass("dropdown_label_on");
            });

        } else {
            $("#"+objId+"_stage").fadeOut(function() {
                $("#"+objId+"_label").removeClass("dropdown_label_on").addClass("dropdown_label_off");
            });
        }
    },

    populate: function(content) {
        if (content.length > 0) {
            content_tpl = "";

            for (i = 0; i< content.length; i++) {
                divId = objId+"_stage_opt_" + content[i+1];
                content_tpl     += "<div id='"+divId+"' class='values dropdown_stage_opt' style='font-size:"+settings.optfontsize+"px;' rel='"+content[i+1]+"'>";
                content_tpl     +=  content[i];
                content_tpl     += "</div>";
                i++;
            }
        }
        $("#"+objId+"_stage").html(content_tpl);

        // Options events
        $("#"+objId+"_stage .values").each( function(eachIndex) {
            optionId = $(this).attr("id")
            $("#"+optionId).bind("mouseover", function() {
                $(this).css("text-decoration", "underline");

            }).bind("mouseout", function() {
                $(this).css("text-decoration", "none");

            }).bind("click", function() {
                methods.setValue($(this).html(), $(this).attr("rel"));
            });
        });

    },

    setValue: function(label, value) {
        $("#"+objId+"_label").html(label);
        settings.defaultvalue = value;
        methods.handleStage;
    },

    getValue: function() {
        return settings.defaultvalue;
    }
};


$.fn.pifo_dropdown = function( method, options ) {

// Methods
if ( methods[method] ) {
  return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
  return methods.init.apply( this, arguments );
} else {
  $.error( 'Method ' +  method + ' does not exist on jQuery.pifo_dropdrown' );
}   


};

})( jQuery );

我不知道为什么会这样。

提前谢谢你们：）