试图解决多个类别下拉

Question

我有一些问题，试图解决我的类别下拉在我正在开发的网站上。基本上，一个下拉式过滤器具有“按位置排序”，第二个过滤器是“按价格排序”。第一个过滤器正确工作，即“按位置排序”，但第二个不正确。它正在加载所有帖子并且没有正确过滤。

这里是链接 -

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

这里是我的代码

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

这里是firebug-

TypeError: dropdown is null 
dropdown.onchange = onCatChange; 

每当我挑 “按价格排序” 类别JavaScript错误从“排序显示所有职位按位置分类“，这是类别ID 23

Answer 1

主要问题是你认为你的2个JavaScripts在不同的上下文中执行，它们是不。它们在相同的上下文中执行，所以

<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; 
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> 

会产生完全相同的结果。你需要改变你的一些变量和函数的名称，以便他们不发生碰撞或做类似：

document.getElementById("cat1").onChange = function(){ 
    if (this.options[this.selectedIndex].value > 0) { 
     location.href = "<?php echo get_option('home');?>/?cat="+this.options[this.selectedIndex].value; 
    } 
} 

document.getElementById("cat2").onChange = function(){ 
    if (this.options[this.selectedIndex].value > 0) { 
     location.href = "<?php echo get_option('home');?>/?cat="+this.options[this.selectedIndex].value; 
    } 
} 

，或者甚至更好

var catChanger = function(){ 
    if (this.options[this.selectedIndex].value > 0) { 
     location.href = "<?php echo get_option('home');?>/?cat="+this.options[this.selectedIndex].value; 
    } 
} 

document.getElementById("cat1").onChange = catChanger;  
document.getElementById("cat2").onChange = catChanger;