使用Multiselect阻止重新加载页面的jQuery

Question

我在我的网站上的选择框中使用以下jQuery multiselect脚本，问题是当我点击选择框时，它每次都重新加载页面，我希望它的方式功能只是从选择框中选择不同的选项，然后点击提交按钮，只要我点击任何一个选择框页面重新加载。

/* jquery.ui.muliselect.js 
* 
* URL: http://corydorning.com/projects/multiselect 
* 
* @author: Cory Dorning 
* @modified: 08/25/2011 
* 
* Multiselect is a jQuery UI widget that transforms a <select> 
* box to provide a better User Experience when you need to select 
* multiple items, without the need to use the CTRL key. 
* 
* 
* @TODO 
* 
* 
*/ 

(function($) { 
    $.widget('ui.multiselect', { 
    _version: 0.1, 

    version: function() { return this._version }, 

    // default options 
    options: { 
     label: '-- Select --', 
     minWidth: 200, 
     maxWidth: null, 
     scroll: 0 
    }, 

    items: [], 

    _create: function() { 
     var self = this, 
      $select = self.element.hide(), 
      items = self.items = $select.children('option').map(function(){ 
      return { 
       label: $(this).text(), 
       value: $(this).text(), 
       option: this // this stores a reference of the option element it belongs to 
      }; 
      }).get(); 

     var $input = self.input = $('<div class="ui-multiselect-input" />') 
      .attr({ 
       // workaround to close menu on blur 
       tabIndex: -1 
      }) 
      .html('<span class="ui-multiselect-label" style="display: inline-block; margin: 2px; padding: 1px;">' + self.options.label + '</span>') 
      .insertAfter($select) 
      .autocomplete({ 
       delay: 0, 
       minLength: 0, 
       source: function(req, resp) { 
       var srcItems = []; 

       $.each(items, function(i, o) { 
        if (!o.option.selected) { 
        srcItems.push(o); 
        } 
       }); 
       resp(srcItems); 
       }, 
       select: function(ev, ui) { 
       $.each(items, function(i, o) { 
        if (ui.item.option === o.option) { 
        self.select(i); 
        } 
       }); 
       } 
      }) 
      .addClass('ui-widget ui-widget-content ui-corner-left') 
      .css({ 
       display: 'inline-block', 
       minWidth: self.options.minWidth, 
       maxWidth: self.options.maxWidth || 'auto', 
       padding: 1, 
       verticalAlign: 'middle' 
      }) 
      .click(function() { 
       self.button.trigger('click'); 
      }); 

     self.button = $('<button>') 
     .insertAfter($input) 
     .button({ 
      icons: { 
      primary: 'ui-icon-triangle-1-s' 
      }, 
      text: false 
     }) 
     .removeClass('ui-corner-all') 
     .addClass('ui-corner-right') 
     .css({ 
      height: $input.outerHeight(), 
      verticalAlign: 'middle' 
     }) 
     .click(function() { 
      // close if already visible 
      if ($input.autocomplete('widget').is(':visible')) { 
      $input.autocomplete('close'); 
      return; 
      } 

      // work around a bug (likely same cause as #5265) 
      $(this).blur(); 

      // pass empty string as value to search for, displaying all results 
      $input.autocomplete('search', ''); 
      $input.focus(); 
     }); 

     if (self.options.scroll) { 
     $('.ui-autocomplete').css({ 
      maxHeight: self.options.scroll, 
      overflowY: 'auto', 
      overflowX: 'hidden', 
      paddingRight: '20px' 
     }); 
     } 

    }, // _create 

    destroy: function() { 
     this.input.remove(); 
     this.button.remove(); 
     this.element.show(); 
     $.Widget.prototype.destroy.call(this); 
    }, // destroy 

    select: function(index) { 
     var self = this, 
      item = self.items[index]; 

     item.option.selected = true; 

     $('<span class="ui-multiselect-item">' + item.label + '</span>') 
     .button({ 
      icons: { secondary: 'ui-icon-close' } 
     }) 
     .css({ 
      cursor: 'default', 
      margin: 2 
     }) 
     .children('.ui-button-text') 
      .css({ 
      lineHeight: 'normal', 
      paddingTop: 0, 
      paddingBottom: 0, 
      paddingLeft: '.5em' 
      }) 
      .end() 
     .children('.ui-icon-close') 
      .css({ 
      cursor: 'pointer' 
      }) 
      .click(function() { 
      $(this).parent().remove(); 
      self.deselect(item); 
      return false; 
      }) 
      .end() 
     .appendTo(self.input); 

     self.element.trigger('change'); 

     self.input.children('.ui-multiselect-label').hide(); 
    }, // select 

    deselect: function(item) { 
     var self = this; 

     item.option.selected = false; 

     self.element.trigger('change'); 

     if (!self.input.children('.ui-multiselect-item').length) { 
     self.input.children('.ui-multiselect-label').show(); 
     } 
    } // deselect 

    }); // $.widget('multiselect') 
})(jQuery); 

这是我使用的代码在我的模板index.php文件>>

 <!-- Multiselect Library--> 
         <script type="text/javascript" src="./multiselect/jquery.ui.multiselect.js"></script> 

    <script> 
    $(function() { 
     // initialize the plugin 
     $('select').multiselect(); 

     $('.w-options').multiselect({ 
     label: '-- Select Your Options --', 
     minWidth: 300, 
     maxWidth: 400, 
     scroll: 80 
     }); 
    }) 
    </script> 

Answer 1

您需要更新插件文件这种方法...

.click(function() { 
    // close if already visible 
    if ($input.autocomplete('widget').is(':visible')) { 
    $input.autocomplete('close'); 
    return; 
    } 

    // work around a bug (likely same cause as #5265) 
    $(this).blur(); 

    // pass empty string as value to search for, displaying all results 
    $input.autocomplete('search', ''); 
    $input.focus(); 
}); 

到而不是

.click(function(e) { 
    e.preventDefault(); 
    // close if already visible 
    if ($input.autocomplete('widget').is(':visible')) { 
    $input.autocomplete('close'); 
    return; 
    } 

    // work around a bug (likely same cause as #5265) 
    $(this).blur(); 

    // pass empty string as value to search for, displaying all results 
    $input.autocomplete('search', ''); 
    $input.focus(); 
}); 

这应该防止兄弟wser做任何事点击