目标：我想制作一个动态页面，允许访问者从下拉菜单中选择月份和年份，并让页面上的内容（帖子）根据所选值进行更改。
我目前正在使用以下代码显示特定月份和年份的特定类别的帖子。
<?php query_posts("cat=3&monthnum=12&year=2011"); ?> <?php if (have_posts()) : ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li>
<?php the_title(); ?>
<?php the_excerpt(); ?>
</li>
<?php endwhile; ?>
</ul><?php endif; ?>
效果很好，但我想让页面动态化，以便访问者可以从下拉菜单中选择月份和年份，并根据所选值更改内容。我已经发布了它如何工作的图片：fivepotato.com/images/ex1.png 和fivepotato.com/images/ex2.png。
为了完成这项工作，我知道我必须将monthnum的值变为变量（取自下拉列表：
<?php $monthvar = $_POST["month"]; query_posts("cat=3&monthnum=$monthvar&year=2011");?>
我对Ajax没有太多经验，但我认为我需要使用它来从下拉菜单中选择每月一次重新过滤内容。
我在以下网站上发现了类似的问题： askthecssguy.com/2009/03/checkbox_filters_with_jquery_1.html
如果有人能帮助我解决这个问题所需要的javascript / Ajax，我将非常感激。
答案 0 :(得分：9)
近1000次观看而非单一评论。好吧，我也需要这个，并决定成功。我已经在下面分享了JavaScript和Wordpress代码，供不久的将来使用。它看起来很多，但那是因为我已经定义了一些jQuery函数，以后可以使用.extend。所有它正在寻找具有CSS类select的{{1}}元素（下拉列表）。
一旦找到，它使用下拉列表的ID将GET变量设置为当前选择的值，然后将其重定向到相同的URL并添加这些GET变量。例如，如果下拉列表的ID为.content-filter，并且其值设置为product_filter，那么它将设置GET变量date。它很棒，因为它不关心你的Wordpess细节 - 所有它关心的是product_filter=date元素。
select现在是Wordpress代码。我们真正需要的是使用某种id生成// A bunch of helper methods for reading GET variables etc from the URL
jQuery.extend({
urlGetVars : function() {
var GET = {};
var tempGET = location.search;
tempGET = tempGET.replace('?', '').split('&');
for(var i in tempGET) {
var someVar = tempGET[i].split('=');
if (someVar.length == 2) {
GET[someVar[0]] = someVar[1];
}
}
return GET;
},
urlGetVar : function(name) {
return $.urlGetVars()[name];
},
serializeUrlVars : function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
},
currentUrl : function() {
return window.location.href.slice(0,window.location.href.indexOf('?'));
}
});
// Adds functionality to filter content using a dropdown
var ContentFilter = function ($) {
$(document).ready(function() {
// Return to a scroll position if exists
var scroll = $.urlGetVar('scroll');
if (typeof scroll != 'undefined') {
$(window).scrollTop(scroll);
}
// Prepare the filter dropdowns
$('.content-filter').each(function(){
var me = $(this);
// e.g. content-filter-product
var id = me.attr('id');
// Refresh with selected filter on change
var refresh = function() {
var GET = $.urlGetVars();
GET[id] = me.val();
// Save scroll position, return to this position on load
GET['scroll'] = $(window).scrollTop();
var newVar = $.currentUrl() + '?' + $.serializeUrlVars(GET);
window.location = newVar;
};
me.change(refresh);
});
});
}(jQuery);
并将类设置为select。此代码要求提供类似“post”或“product”的帖子类型并生成select元素。然后它返回GET变量以方便使用，如果没有设置，则默认为“newest”。请注意，.content-filter数组设置了您要支持的所有不同orderby values。您始终可以使用$fields或$_GET['product_filter']在模板中的任意位置访问它，具体取决于您的类型。这意味着在任何给定的页面上只能存在一个，但是你想要它 - 否则jQuery将不知道使用哪个。您可以扩展此代码以设置自定义ID或稍后您喜欢的任何内容。
$_GET['post_filter']现在有趣的部分 - 将它放在内容页面中。我们所有的工作都得到了一些甜蜜和简短的代码：
function ak_content_filter($post_type_id = 'post', &$filter_get_value, $echo = TRUE) {
$dropdown = '<div class="content-filter-wrapper">';
// The dropdown filter id for this post type
$filter_id = $post_type_id.'_filter';
// The actual dropdown
$dropdown .= '<label for="'. $filter_id .'">Filter</label><select id="'. $filter_id .'" class="content-filter" name="'. $filter_id .'">';
// The available ways of filtering, to sort you'd need to set that in the WP_Query later
$fields = array('date' => 'Newest', 'comment_count' => 'Most Popular', 'rand' => 'Random');
$filter_get_value = isset($_GET[$filter_id]) ? $_GET[$filter_id] : 'newest'; // default is 'newest'
foreach ($fields as $field_value=>$field_name) {
$dropdown .= '<option value="'. $field_value .'" '. selected($field_value, $filter_get_value, FALSE) .'>'. $field_name .'</option>';
}
$dropdown .= '</select></div>';
// Print or return
if ($echo) {
echo $dropdown;
} else {
return $dropdown;
}
}
我使用了自定义帖子类型“产品”，但如果您使用'post'，则只需替换它。有人应该把它变成一个插件，如果他们还没有：P