Creating multiple category drop down

Question

I'm trying to figure out on how to create a multiple category drop down to filter different types of post

Here is an image of my work in progress

http://i255.photobucket.com/albums/hh140/testament1234/multiple_category_zpsa93a6f33.png

The category highlighted in a red box shape doesn't seem to be working. I'm not sure if it is because it has a conflict. I checked for any errors using firebug but nothing is displayed. I do not like to rely on plugins at the moment

Here is my HTML code

<h2>projects</h2>

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

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

CSS:

#cat{
background-image: url("images/form_arrow.png");
background-repeat: no-repeat;
background-position: 80% center;
border: 0px none;
float: right;
font-family:'Sintony', sans-serif;
margin-right: -25px;
overflow: hidden;
padding: 5px;
width: 200px;

}

.filter_container{
border: 2px solid #8e8fbb;
float: right;
height: 30px;
overflow: hidden;
position: relative;
}

JS:

<!--DROPDOWN SORT 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>

Functions.php(Specify what categories to display)

$args = array(
'show_option_all'    => '',
'show_option_none'   => '',
'orderby'            => 'ID', 
'order'              => 'ASC',
'show_count'         => 0,
'hide_empty'         => 1, 
'child_of'           => 0,
'exclude'            => '1,2,3',
'echo'               => 1,
'selected'           => 0,
'hierarchical'       => 0, 
'name'               => 'cat',
'id'                 => '',
'class'              => 'postform',
'depth'              => 0,
'tab_index'          => 0,
'taxonomy'           => 'category',
'hide_if_empty'      => false,
'walker'             => ''
);

-----UPDATED JS-----

<!--DROPDOWN SORT CATEGORY -->
<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 -->
<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

Answer 1

Change 'id' => '' in your $args to be unique values for each dropdown. If it's empty it defaults to the value of name, which is cat in both instances.