Tag Archives: select

How to add Dropdown Page Selection Pagination to WordPress without Plugins CodeUnit 04 JUN 2012

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.

jQuery(document).ready(function($){
	$('#paginationpageselectcontrol').change(function(){
		window.location = $('#paginationpageselectcontrol').val();
	});
});

See it in action at the bottom of this blog!

Nifty.

jQuery: Dropdown Lists: Get the Text of the Currently Selected Option instead of the Value Programming 11 NOV 2011

If you develop websites and work with JavaScript, but have never heard of jQuery before, then it is probably best that you start reading up on it right now. After all, as they like to put it themselves, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript!

Dropdown select lists are a great tool in your HTML form arsenal, consisting of outer <select> tags which contain any number of <option> tags that make up the list options. Of course we all know that the value of an option doesn’t have to match what is displayed for that option, which leads us straight into today’s tip to retrieve the currently selected text string instead of the value.

The val() method in jQuery would return us the option’s value, meaning that in order to grab the text of an option, we would have to turn to the jQuery text() method.

Knowing this, the next part of this puzzle is to located the option which happens to be currently selected – and for that jQuery provides the very useful :selected selector.

The :selected selector selects all elements that are currently selected in a dropdown list, working on option tags. This means that while it will work on select boxes, it won’t function on checkboxes or radio buttons as those inputs use :checked.

So in practice, to get the text string for the currently selected option in a select dropdown list looks like this:

alert($('#mylist :selected').text());

Simple.

Updated: Another example lifted off of stackoverflow:

<select id="myselect">
   <option selected="selected">All</option>
   <option value="1">One</option>
   <option value="2">Two</option>
</select>
console.log($('#myselect').val());

// all option's value
$('#myselect').find('option').each(function(){
    console.log($(this).text());
    console.log($(this).val());
});

// change event
$('#myselect').change(function(){
    console.log($(this).find(':selected').text());
    console.log($(this).find(':selected').val());
});

And now you know.

Couple Choosing Product From Shelf While Shopping In Supermarket

jquery logo

Related Link: http://api.jquery.com/selected-selector/

How to Group Options in a Select Dropdown List CodeUnit 05 OCT 2011

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?

jQuery: Change the Selected Index of a Dropdown List CodeUnit 22 OCT 2010

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

Given:

<select name=”testselect” id=”testselect”>
<option>Value 1</option>
<option>Value 2</option>
</select></div>

We can force the selection of the second option with:

$('#testselect').val('Value 2');

Alternatively, now that the jQuery bug has been fixed, you could also set the selectedIndex attribute of the dropdown list like so:

$("#testselect").attr('selectedIndex', 1); 

And now you know! :)

SQL: Finding Duplicate Rows based on Multiple Columns CodeUnit 25 JUN 2010

Locating duplicate rows based on multiple column values with SQL turns out to be a fairly simple exercise.

If we take the usual method for locating duplicate rows based on a single column’s value, we see that locating a duplicate is nothing more than grouping on that column where the instance of that column value appears more than once.

In other words:

SELECT email, COUNT(email)
FROM users
GROUP BY email
HAVING ( COUNT(email) > 1 )

Now to find duplicate rows based on the values held by multiple columns, we simply expand on what we have done before and provide more parameters to work against, resulting in a SQL statement that looks like:

SELECT firstname, COUNT(firstname), surname, COUNT(surname), email, COUNT(email) 
FROM users
GROUP BY firstname, surname, email
HAVING (COUNT(firstname) > 1) AND (COUNT(surname) > 1) AND (COUNT(email) > 1)

And that is seriously how simple finding duplicate rows based on a compound key (multiple columns restraint) really is! :)

jQuery: Select all options in a Multiple Select Listbox Programming 26 FEB 2010

Sometimes it is nice to present a multiple select listbox to a user with everything already selected.

Handy if you’re using listboxes as filter controls, and something that is, as per usual, quite easy to do using the magic that is the jQuery javascript library.

Essentially what the aim of the game here is to set the selected option in each of the multiple select listbox’s <option> entries.  In order to do this, we will once again make use of jQuery’s nifty prop() function and apply this to the result of our clever little jQuery selector call, which will hone in on our desired select listbox using its ID value and then extending that result to only include all option entries.

So the resulting call would look something like this:

$("#multipleselect option").prop("selected",true);

And there you go. A multiple select listbox with everything already selected for you!