Jquery封装：下拉框插件

代码如下：

;(function ($, window) {
    $.fn.addSelect = function (options) {

        //合并传入与默认的参数
        var opts = $.extend({}, $.fn.addSelect.defaultOpts, options || {});
        //实现方法
        $(this).each(function () {

            var _that = $(this);
            // 获取下拉内容容器
            var searchContentContain = _that.find(opts.searchContentContain).length > 0 ?
                _that.find(opts.searchContentContain) : _that.children(":last");
                searchContentContain.addClass("jsSpecialControlSlideNavigationContain");
            //赋值容器
            var changeValue = _that.find(opts.getValueClass);
            //触发箭头
            var _triggerArrow = _that.find(opts.triggerElement);
            var _triggerElement = null;
            // 扩展点击区域，那么触发对象就是下拉三角的父元素，否则就只有下拉三角是触发下拉元素
            if (opts.extendTrigger) {
                _triggerElement = _triggerArrow.parent();
                // 增加className  extendTriggerClass
                _triggerElement.addClass("extendTriggerClass").css({
                    cursor : "pointer"
                });
            } else {
                _triggerElement = _triggerArrow;
            }
            // 绑定下拉事件
            _triggerElement.bind(opts.mouseType, function (event) {
                //阻止事件冒泡
                event.stopPropagation();
                //阻止默认事件
                event.preventDefault();
                // 显示或者隐藏下拉内容狂
                showOrHideSearchContentContain();
            });

            function showOrHideSearchContentContain() {
                if (searchContentContain.is(":hidden")) {
                    // 其他下拉框隐藏
                    $(".jsSpecialControlSlideNavigationContain").hide();
                    // 显示当前点击的那个下拉内容容器
                    searchContentContain.show();
                    _triggerArrow.addClass("sp_mousedown_plus");
                } else {
                    // 隐藏下拉内容容器
                    searchContentContain.hide();
                    _triggerArrow.removeClass("sp_mousedown_plus");
                };
            }
            //  绑定文档事件
            $(document).bind("click", function (event) {
                // 获取当前的点击元素
                var _target = $(event.target);
                //  隐藏元素
                searchContentContain.hide();
            });

            //  为内容导航容器的子元素绑定事件
            searchContentContain.children().each(function () {
                $(this).hover(function () {
                    $(this).addClass(opts.addHoverClass).siblings().removeClass(opts.addHoverClass);
                }, function () {
                    $(this).removeClass(opts.addHoverClass);
                });
                $(this).click(function () {
                    var value = $(this).text();
                    changeValue.text(value);
                    searchContentContain.hide();
                    opts.callBack != null ? opts.callBack(value, $(this), changeValue) : "";
                });
            });

        });
    }
    /*
     *    默认参数
     *    triggerElement                触发事件的元素
     *  mouseType                    触发的事件类型
     *    extendTrigger                是否扩展，      布尔值，默认为false,备选参数，true
     *    searchContentContain        下拉框容器对象  参数为id 或者class
     *    addHoverClass                下拉框容器鼠标滑过时添加的类名  参数为不带"." 的class
     *    getValueClass                获得新值得容器对象 参数为id或者class
     *    callBack                    回调函数,会返回当前获取的值
     */
    $.fn.addSelect.defaultOpts = {
        triggerElement : ".sp_mousedown", // className 或者id  或者元素选择器
        mouseType : "click", // 鼠标事件
        extendTrigger : false, //  布尔值，默认为false,备选参数，true
        searchContentContain : ".search_con_nav", //  className 或者id  或者元素选择器
        getValueClass : ".sp_gain_value", //  注意此参数带 "."或者"#"
        addHoverClass : "dd_hover", //  注意此参数不带 "."且必须是class名    ,
        callBack : null
    };
})(jQuery, window);

如此使用的:

$(".fd-form-select").addSelect({
                triggerElement : ".fd-form-select-mousedown", // className 或者id  或者元素选择器
                mouseType:"click",                // 鼠标事件
                extendTrigger : true,             //  布尔值，默认为false,备选参数，true
                searchContentContain : ".fd-form-select-con", //  className 或者id  或者元素选择器
                getValueClass : ".fd-form-select-value" ,//  注意此参数带 "."或者"#"
                addHoverClass : "hover" ,//  注意此参数不带 "."且必须是class名    
                callBack:function(value){
                    console.log(value);
                    //回调函数输出值
                    
                }
            });