Trying to fix multiple category drop down

Question

I'm having some problems trying to fix my category drop down on the website i'm developing. Basically one drop down filters has "Sort by Location" and the second one is "Sort by Price" The first one is working correctly which is "Sort by Location" but the second one doesn't. It is loading all the post and not filtering properly.

Here is the link -

http://digitalspin.ph/federalland/?page_id=23

Here is my code

HTML-

<div class="filter_container">
        <?php wp_dropdown_categories( $args_cat1 ); ?> 
</div>

<div class="filter_container">
        <?php wp_dropdown_categories( $args_cat2 ); ?> 
</div>

JS-

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


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

Functions.php

//LOCATION FILTER

$args_cat2 = array(
'show_option_all'    => '',
'show_option_none'   => '',
'orderby'            => 'ID', 
'order'              => 'ASC',
'show_count'         => 0,
'hide_empty'         => 1, 
'child_of'           => 0,
'exclude'            => '1,2,3,4,32,33,34,35,36,37',
'echo'               => 1,
'selected'           => 0,
'hierarchical'       => 0, 
'name'               => 'cat2',
'id'                 => 'cat2',
'class'              => 'postform',
'depth'              => 0,
'tab_index'          => 0,
'taxonomy'           => 'category',
'hide_if_empty'      => false,
'walker'             => ''
);

//PRICE FILTER

$args_cat1 = array(
'show_option_all'    => '',
'show_option_none'   => '',
'orderby'            => 'ID', 
'order'              => 'ASC',
'show_count'         => 0,
'hide_empty'         => 1, 
'child_of'           => 0,
'exclude'            => '1,2,3,4,23,24,25,26,27,28,29,30,31',
'echo'               => 1,
'selected'           => 0,
'hierarchical'       => 0, 
'name'               => 'cat1',
'id'                 => 'cat1',
'class'              => 'postform',
'depth'              => 0,
'tab_index'          => 0,
'taxonomy'           => 'category',
'hide_if_empty'      => false,
'walker'             => ''
);

Here is a javascript error from firebug-

TypeError: dropdown is null
dropdown.onchange = onCatChange;

Whenever i pick a category in "Sort by Price" it display all the post from "Sort by Location" which is category ID 23

----UPDATED CODE ----

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


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

Answer 1

The HTML seems correct, as Price dropdown contains the right cat ID.

I guess this is a JS problem, my first guess is that you shouldn't use the same variable name in both scripts.

Replace dropdown by dropdown_price for second one, like :

<!--DROPDOWN SORT CATEGORY 2-->
<script type="text/javascript">
var dropdown_price = document.getElementById("cat2");
function onCatPriceChange() {
    if ( dropdown_price.options[dropdown_price.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown_price.options[dropdown_price.selectedIndex].value;
    }
}
dropdown_price.onchange = onCatPriceChange;

Let us know !