jQuery模拟select实现下拉菜单功能

用jquery模拟一淘上面的搜索下拉的功能，利用css3做箭头的动画效果。

JS代码：

/*
 * 模拟搜索下拉select
 * 默认调用方式：$(el).setSelect({
 * optionList: [], //这里是下拉的选项，如['aa','bb']
 * hiddenInput: '#optionHidden', //隐藏的input获取选中后的值，供表单提交时传值
 * getOption: '#sOptionBtn',
 * callback: function(option){}
 * })
 *
*/
(function ($) {
 $.fn.setSelect = function(options){
   var opt = $.extend({
    optionList: [],
    getOption: '',
    hiddenInput: '',
    callback: function(){}
   }, options || {});
  return this.each(function(){
    opt._id = this;
    var _time;
    var arrow = $(this).find('i');
    $(opt._id).append('
');
    for(var i=0;i'+opt.optionList[i]+'')
     };
    $(opt._id).bind({
      mouseenter: function(){
        $(arrow).addClass('arrow-hover');
        $('#selectList').slideDown();
        clearTimeout(_time);
       },
      mouseleave: function(){
        _time=setTimeout(function(){
          $(arrow).removeClass('arrow-hover');
          $('#selectList').slideUp()
         },300);
       }
     });
    //获取选择的值
    $('#selectList').delegate('li','click',function(){
        var option = $(this).text();
        $(opt.getOption).text(option);
        $(opt.hiddenInput).val(option);
        $('#selectList').slideUp();
        return opt.callback(option);
      });
   });
 }
})(jQuery);

demo:(只有在高级的chrome及firefox下才能看到CSS3动画效果)

截个图：

代码：

 
  
  
  
  
 
  

   
   
   

    机构
    
   
   
   搜索
  
 
 
 

以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持全福编程网。