Пользовательский таксономический фильтр WordPress

Я пытаюсь создать фильтр продукта, который работает примерно так:

http://www.permco.com/

Я получил его до такой степени, что я вызвал таксономии и поместил их в выпадающий список.

$prodtype = array(
'show_option_all'    => '',
'show_option_none'   => '',
'orderby'            => 'ID',
'order'              => 'ASC',
'show_count'         => 0,
'hide_empty'         => 1,
'child_of'           => 0,
'exclude'            => '',
'echo'               => 1,
'selected'           => 0,
'hierarchical'       => 0,
'name'               => 'cat',
'id'                 => '',
'class'              => 'postform',
'depth'              => 0,
'tab_index'          => 0,
'taxonomy'           => 'product-types',
'hide_if_empty'      => false,
);
$displacement = array(
'show_option_all'    => '',
'show_option_none'   => '',
'orderby'            => 'ID',
'order'              => 'ASC',
'show_count'         => 0,
'hide_empty'         => 1,
'child_of'           => 0,
'exclude'            => '',
'echo'               => 1,
'selected'           => 0,
'hierarchical'       => 0,
'name'               => 'cat',
'id'                 => '',
'class'              => 'postform',
'depth'              => 0,
'tab_index'          => 0,
'taxonomy'           => 'displacement',
'hide_if_empty'      => false,
);

<form>
<b><?php _e('Product Type'); ?></b><br/>
<?php wp_dropdown_categories($prodtype); ?>
<br/>
<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>
<b><?php _e('Displacement'); ?></b><br/>
<?php wp_dropdown_categories($displacement); ?>
<br/>
<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>

Моя проблема в том, что я не могу получить выпадающие списки, чтобы обновить страницу и автоматически перезагрузить продукты, как это делается на примере веб-сайта.

Поэтому я хотел бы, чтобы пользователь выбрал элемент из выпадающего меню, чтобы продукты обновились и загрузили продукты, соответствующие этому критерию, а затем, когда они выбирают вариант из второго выпадающего списка, я хочу, чтобы продукты автоматически просматривали и отображали только продукты, которые соответствуют обеим этим выборкам.

Любая помощь будет оценена.