Multiple Instances of wp-dropdpwn_categories not working – any advice?

When I use the below options – the first drop down select works – but the ones following after don’t – they display the categories fine – but the links do not work –

<!-- for drop down select -->
126
<form action="<?php bloginfo('url'); ?>" method="get">
<?php wp_dropdown_categories('orderby=name&show_option_none=cat title &child_of=126'); ?>
</form>

127
<form action="<?php bloginfo('url'); ?>" method="get">
<?php wp_dropdown_categories('orderby=name&show_option_none=cat title&child_of=127'); ?>
</form>

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

I’ve tried looking into both this: https://www.ads-software.com/support/topic/is-the-new-dropdown_categories-working?replies=13#post-657759
and
https://codex.www.ads-software.com/Function_Reference/wp_dropdown_categories

What are you trying to do is it a theme options page, widget options, each instance would need it’s own ID, I did look at it but could not work out how to use it, so I done it with get_categories and a control?

If you want each one in its own right then use get_categories( $args );

Then use a select type, this is how I use it for a category sidebar theme widget.

?>
</select></p>		

<p><label for="<?php echo $this->get_field_id('catid'); ?>"><?php _e("Category")?></label>
<br/>
<select id="<?php echo $this->get_field_id('catid'); ?>" name="<?php echo $this->get_field_name('catid'); ?>">
<?php
foreach ($categories as $cat) :
	$selected = ( $cat->cat_ID == esc_attr($catid) ) ? ' selected = "selected" ' : '';
	$option = '<option '.$selected .'value="' . $cat->cat_ID;
	$option = $option .'">';
	$option = $option .$cat->cat_name;
	$option = $option .'</option>';
	echo $option;
endforeach;
?>
</select></p>

Not sure if this is what you are after, but it gives a dropdown with the category list?

EDIT
Just checked the $args for wp_dropdown_categories and there is one argument for the 'name' default 'cat', use a different name for each control, I never thought to check this one, there is even one for selected so you can highlight the selected category ID ??

'name' => 'cat-1',
'selected' => $catid,

Like:

<form action="<?php bloginfo('url'); ?>" method="get">
<?php wp_dropdown_categories('name=cat-1&orderby=name&show_option_none=cat title&child_of=126'); ?>
</form>

<form action="<?php bloginfo('url'); ?>" method="get">
<?php wp_dropdown_categories('name=cat-2&orderby=name&show_option_none=cat title&child_of=127'); ?>
</form>

Then you will have to update the JQuery.

Regards

David

Thanks! – I am going to try what you suggested

Kust a little more explanation – what I am trying to accomplish is to make a category index with parent category drop downs in my sidebar template file – so that I can have each parent category and its sub-categories neatly and compactly displayed in the sidebar – instead of one super long category drop-down (which would be hard to use because there are so many categories) – it will be broken up into all the parent categories first
It would eventually look like this:

BROWSE POSTS BY CATEGORY TYPES:
————————–
| PHOTOGRAPHY SUBJECT v |
————————–
| LOCATION v |
————————–
| RECIPE TYPE v |
————————–

I am sure there is a plugin for this without the headache, I did look at this one a while back, but never got around to testing it, if I remember it has a sidebar widget that does what you want out the box.

Might save you some time as it can be styled as well.

HTH

David

I think your original idea worked – I was trying earlier to set unique id’s but I didn’t think of resetting the script this is what is working now for me – I am going to test it some more:

<form action="<?php bloginfo('url'); ?>" method="get">
<?php wp_dropdown_categories('name=cat-2&id=cat-2&orderby=name&show_option_none=127 title&child_of=127'); ?>
</form>

<script type="text/javascript"><!--
var dropdown = document.getElementById("cat-2");
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>

<form action="<?php bloginfo('url'); ?>" method="get">
<?php wp_dropdown_categories('name=cat-1&id=cat-1&orderby=name&show_option_none=Ingredients&child_of=126'); ?>
</form>

<script type="text/javascript"><!--
var dropdown = document.getElementById("cat-1");
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>

thanks for the help!!!

??

No problem, it made me look at wp_dropdown_categories() again, I missed seting the name/id, so I can now set the name and id in code to use in a plugin.

The Codex and other examples out there are not clear on how to use it.

Mark this one as resolved if it is working please.

David

Sorry after further testing – it seems like I am still having the same issues (I am not sure why I thought it was working)

the is the last dropdown on the page works but it seems to cancel out the earlier ones – also now if I do get the last drop down to work – it doesn’t allow me to use any normal links on the page – it seems to hold the ‘select’ value / address – am going to test it some more.

This one spits out an array of drop downs – but the show option gets repeated and the script doesn’t work…

<?php
$cat='129,127,131,128,130';
$dropdown_array=explode(",", $cat);
$display=get_cat_name($cat);
echo '<form  id="drop-down-container">';
foreach ($dropdown_array as $cat) {
wp_dropdown_categories('child_of='.$cat.'&show_option_none='. $display .'');
}
echo '</form>';
?>

<script type="text/javascript"><!--

var dropdown=document.getElementById('cat').
function onCatChange() {
    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>

ok – so after working on this forever – it seems I just needed to make sure each wp_dropdown_categories had its own var and id for each to work correctly. I’m pasting it in its entirety – although no one else would probably need it :

<form action="<?php bloginfo('url'); ?>" method="get" >

<!-- drop down select 126 Ingredients -->
<?php wp_dropdown_categories('id=cat1&orderby=name&show_option_none=Ingredients&child_of=126'); ?>
<script type="text/javascript">
var divElements = document.getElementById("cat1")
function onCatChange() {
if ( divElements.options[divElements.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home'); ?>/?cat="+divElements.options[divElements.selectedIndex].value;
}}
divElements.onchange = onCatChange;
--></script>

<!-- drop down select 127 Cuisine and Location -->
<?php wp_dropdown_categories('id=cat2&orderby=name&show_option_none=Cuisine and Location&child_of=127'); ?>
<script type="text/javascript">
var divElements2 = document.getElementById("cat2")
function onCatChange() {
if ( divElements2.options[divElements2.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home'); ?>/?cat="+divElements2.options[divElements2.selectedIndex].value;
}}
divElements2.onchange = onCatChange;
--></script>
</form>