//此插件用于带图片的下拉列表显示效果，0.gif为百度图片，1.gif为本站图片，3.gif为按钮图片
//方法部分
(function($){ 
$.fn.templatedSelect = function(options){ 
 
var defaults ={ 
        selectHandleImage:"/images/3.gif",//selectHandle.gif 
        width:"36px", 
        height:"20px", 
        getOption:function(value, text){ 
                        return text; 
                }
}; 
var opts = $.extend(defaults, options); 
        var $originalSelect = this; 
        var $container = $(document.createElement('div')) 
                .css("clear", "both") 
                .css("width", opts.width) 
                .css("height", opts.height) 
                .hover( 
                        function (){ 
                                $selectBox.css("border-color", "#C0C0C0"); 
                        }, 
                        function (){ 
                                if (!$menuItems.is(":visible")) 
                                        $selectBox.css("border-color", "#C0C0C0"); 
                        }) 
                .attr('id', "imageSelect_container_" + this.attr('id')); 
 
        var $selectBox = $(document.createElement('div')) 
                .css("border", "solid 1px #C0C0C0") 
                .css("overflow", "hidden") 
                .css("width", "100%") 
 
        var $selectedItem = $(document.createElement('div')) 
                .css("padding", "2px 0px 0px 4px"); 
 
        var $selectHandle = $(document.createElement('div')) 
                .css("float", "right") 
                .css("background-color", "#F0F0F0") 
                .css("padding", "0px") 
                .css("cursor", "hand")                   
                .click(function(e){ 
            ToggleMenuItems(); 
        }) 
                .html( 
                        $(document.createElement('img')).attr("src", opts.selectHandleImage) 
                ); 
 
        var $menuItems = $(document.createElement('div')) 
                .css("position", "absolute") 
                .css("margin-top", "-1px") 
                .css("border", "solid 1px #C0C0C0") 
                .css("background-color", "#FFFFFF") 
                .hide(); 
 
        $originalSelect.children("option").each(function(i, selected){   
                var $menuItem = $(document.createElement('div')) 
                        .css("padding", "4px") 
                        .html(opts.getOption($(this).val(), $(this).text()))
                        .val($(this).val()) 
                        .click(function(e){ 
                                ToggleMenuItems(); 
                                $originalSelect.val($(this).val());
                                //alert($selectedItem.html());重要调试
                                $selectedItem.html($(this).html()); 
                                if($(this).val()==0)
                                {
                                    $('.main-l2-content1-r input').attr("value","手机号、问题id号、关键词");
                                    $('.sub-l1-content1-r input').attr("value","手机号、问题id号、关键词");
                                }
                                else
                                {
                                     $('.main-l2-content1-r input').attr("value","请输入关键词搜索");
                                     $('.sub-l1-content1-r input').attr("value","请输入关键词搜索");
                                }
                        }) 
                        .hover( 
                                function (){ 
                                        $(this).css("background-color", "#81BEF7"); 
                                }, 
                                function (){ 
                                        $(this).css("background-color", "#FFFFFF"); 
                                }) 
                        .appendTo($menuItems); 
        }); 
 
        //preset the selectedItem 
        $selectedItem.html( 
                $menuItems.children("div:eq("+$originalSelect[0].selectedIndex+")").html() 
        ); 
 
        //put everything together 
        $selectBox.appendTo($container); 
        $selectHandle.appendTo($selectBox); 
        $selectedItem.appendTo($selectBox); 
        $menuItems.appendTo($container); 
 
        //hide the original select and put ours in 
        $originalSelect.hide(); 
        $container.insertBefore($originalSelect); 
 
        $selectHandle.height($selectBox.height()); 
        $menuItems.width($selectBox.width()); 
 
        function ToggleMenuItems(){ 
                if ($menuItems.is(":visible")){ 
                        $menuItems.hide(); 
                        $selectBox.css("border", "solid 1px #C0C0C0");
                } else{ 
                        $menuItems.show(); 
                        $selectBox.css("border", "solid 1px #C0C0C0");
                } 
        } 
 
}})(jQuery);