How to display Categories in a drop down list ?

Well, there are many reasons to show Categories in a drop down box or drop down list. One can be due to a blog having lot of categories which doesn’t look suitable showing in widgets and it increases the height of the page a lot and etc.

Here I’m sharing with you some simple code snippets that can help you show your Categories in a drop down list in various ways, such as showing Submit button and list without a submit button but on click.

The default code:

<?php wp_dropdown_categories( $args ); ?> is the default code to call categories in a drop down menu.

Dropdown with Submit Button

Displays a hierarchical category dropdown list in HTML form with a submit button, in a WordPress sidebar unordered list, with a count of posts in each category.

<li id="categories">
 <h2><?php _e('Categories:'); ?></h2>
   <form action="<?php bloginfo('url'); ?>" method="get">
   <?php wp_dropdown_categories('show_count=1&hierarchical=1'); ?>
   <input type="submit" name="submit" value="view" />
   </form>
</li>

Dropdown without a Submit Button using JavaScript

<li id="categories"><h2><?php _e('Posts by Category'); ?></h2>
	<?php wp_dropdown_categories('show_option_none=Select category'); ?>

<script type="text/javascript"><!--
    var dropdown = document.getElementById("cat");
    function onCatChange() {
		if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
			location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
		}
    }
    dropdown.onchange = onCatChange;
--></script>
</li>

Dropdown without a Submit Button using JavaScript (b)

In this example the echo parameter (echo=0) is used. A simple preg_replace inserts the JavaScript code. It even works without JavaScript (submit button is wrapped by noscript tags).

<li id="categories">
	<h2><?php _e('Posts by Category'); ?></h2>
	<form action="<?php bloginfo('url'); ?>/" method="get">
<?php
	$select = wp_dropdown_categories('show_option_none=Select category&show_count=1&orderby=name&echo=0');
	$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
	echo $select;
?>
	<noscript><input type="submit" value="View" /></noscript>
	</form>
</li>

For more info / Courtesy: Codex.Wordpress