Pagination to me is a necessity in that it gives a reader a better idea of just how big or small a site is based on the number of posts.
The default for WordPress is to include simple Newer and Older buttons, though pagination is baked in (and catered for by a variety of plugins). This pagination however usually takes the form of a line of numbers, skipping out a large chunk of the range for space considerations and thus not really delivering an easy way to get to the page which may not appear in the displayed pagination control bar.
My preferred pagination display has also been the simple dropdown select box, and the following code shows you how to achieve this by simply adding the following lines to the bottom of your loop.php file.
Note that the code below assumes you are working with structured permalinks (because seriously, who wouldn’t be?). If not, it should theoretically be simple to adapt by switching out $format and $base variables to use ( ‘&page=%#%’).
Anyway, here is the code:
$total = $wp_query->max_num_pages;
// only bother with the rest if we have more than 1 page!
if ( $total > 1 ) {
// get the current page
if ( !$current_page = get_query_var('paged') ){
$current_page = 1;
}
// structure of "format" depends on whether we're using pretty permalinks
$format = 'page/%#%/';
$linkarray = paginate_links(array(
'base' => str_replace( 'page/9999999/', '%_%', esc_url( get_pagenum_link( 9999999 ) ) ),
'format' => $format,
'current' => 0,
'show_all' => True,
'total' => $total,
'mid_size' => 4,
'prev_next' => False,
'type' => 'array'
));
$urlarray = array();
foreach($linkarray as $value){
$pieces = explode(''',$value);
foreach($pieces as $piece){
if (substr(strtolower($piece),0,4) == 'http'){
$urlarray[] = $piece;
}
}
}
echo '<div style="text-align: center">(Or jump to page ';
echo '<select id="paginationpageselectcontrol" name="paginationpageselectcontrol">' . "n";
$pagecounter = 1;
foreach($urlarray as $url){
echo '<option value="' . $url . '"' . (($pagecounter == $current_page)?' selected':'') . '>' . $pagecounter . '</option>' . "n";
$pagecounter = $pagecounter + 1;
}
echo '</select>' . "n";
echo ' of ' . $total . ')</div>';
}
Now that we’ve printed out a nice dropdown box to use, we add a javascript controller to actually jump to the selected page on selected index change. In this case I’ve opted to use jQuery, but you could of course use whatever method you want.
The classic HTML select dropdown list box has been with us for a long time, consisting of a container <select> tag which in turn contains a number of <option> tags which make up the list items which the user can then choose one from.
If you have a number of options which can be logically grouped, then there is a further tag that you can make use of, namely the <optgroup> tag. This allows you to group related options by placing them in the <optgroup> container, which coincidently has a non selectable label to make the various group definitions easy to see in the eventual drop down list.
In practice, your HTML would look like this:
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Which would translate to this on your web page:
Supported by all major browsers, it certainly is a useful little tag to keep in the back of your mind. If you want more information on the <optgroup> tag, why don’t you pay a visit here?
There are a number of ways to set the selected index of a dropdown list when it comes to jQuery, though unfortunately one of them only works about half the time, basically whenever the guys behind the library remember to fix a particular bug in the system for that particular release.
However, these two methods below all work flawlessly, and should give you all the tools you need (note the first two examples are actually the same method):
// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0');
// sets selected index of a select box to the option with the value ""
$("select#elem").val('');
// sets selected index to first item using the DOM
$("select#elem").get(0).selectedIndex = 0;
The method you would expect to see but which I have omitted because it is a recurring bug that gets fixed in most but not all releases is of course the manipulation of the selectedIndex attribute through the attr() call. But seeing as the DOM method works well, there is no reason to even bother listing this one anymore!
To change the selected value, or selected index if you will, of a dropdown list using jQuery is not particularly difficult.
The classic method to achieve this is to simply set the dropdown’s value to a value already contained in the list using val(). (Of course this does require that the specified value is actually in the list, either specified as the value of an option or the option text itself!)
I’ve said it once and I’ll say it a million times over and again, the jQuery javascript library is simply fantastic. Today’s little code snippet is going to look at removing all the options from a select dropdown list or listbox, on the fly and using jQuery.
To get this little trick working, we are going to be making use of the remove() function that allows us to strip the target out of the pages DOM, essentially removing it from view and access.
In order to do this, we will construct a selector that will locate the target list using its ID value and then filter it down to all of its option children. Traversing through each option using the handy each() function, we will then apply a remove() call, essentially dropping that specific option out of the list, and in the end, leaving us with an empty <select> construct. Nice.
So the snippet to do this then would look a little something like this:
You can probably simplify the above by shortening the call logic and letting jQuery handle all the internals for you, but leaving it in the form that the example is currently in shows you exactly step for step how we are setting about achieving our desired empty state.
Pagination to me is a necessity in that it gives a reader a better idea of just how big or small a site is based on the number of posts. 
