Question

I am using the following jQuery multiselect script on the select boxes on my website, the problem is when I click the select boxes it is reloading the page each time, the way I want it to function is just to select the different options from the select box and then click the submit button, as present as soon as I click any of the select boxes the page gets reloaded.

/* 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);

This is the code I am using in my template index.php file >>

      <!-- 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

You need to update this method in plugin file…

.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();
});

to instead be

.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();
});

This should prevent browser from doing anything on click