Question

Similar to this question I would like to use dropdown plugin called dropkick, which replaces select menus with better looking, custom dropdowns. This time around, I want to put wordpress archives within a dropdown. The standard way of doing this is like so:

<select name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
  <option value=""><?php echo esc_attr( __( 'Select Month' ) ); ?></option> 
  <?php wp_get_archives( 'type=monthly&format=option&show_post_count=1' ); ?>
</select>

To adapt this technique for dropkick, I want to remove the onchange js part of the php so it looks like this:

<form action="???" method="get" class="prettyArchive">
    <select>
         <option value=""><?php echo esc_attr( __( 'Select Month' ) ); ?></option> 
         <?php wp_get_archives( 'type=monthly&format=option&show_post_count=1' ); ?>
    </select>
</form>

The jquery that converts this dropdown into a “pretty dropdown” is:

$('.prettyArchive select').dropkick({
      theme: 'default',
      change: function (value, label) {
         INSERT CALLBACK HERE
      }
});

I need a callback that will emulate the onchange event shown above. I do not believe the form needs to be submitted, but rather a page refresh on change? Not really sure how to go about this. Any ideas?

Answer 1

Haven’t used that particular plugin, so I’m not sure what values are being passed to the callback, but maybe something like this:

$('.prettyArchive select').dropkick({
      theme: 'default',
      change: function (value, label) {
         document.location.href=value;
      }
});