创建多个类别下拉列表

Question

我正在试图弄清楚如何创建一个多类别下拉菜单以过滤不同类型的帖子

以下是我正在进行的工作的图片

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

以红色框形状突出显示的类别似乎不起作用。我不确定是不是因为它有冲突。我使用firebug检查了任何错误，但没有显示任何内容。我现在不喜欢依赖插件。

这是我的HTML代码

<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（指定要显示的类别）

$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'             => ''
);