我想知道如何创建一个多类别下拉列表来过滤不同类型的帖子

这是我正在进行的工作的图像

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

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

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

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