我正在尝试创建一个菜单,可用于对我的数据库中的帖子进行排序或过滤,就像imgur.com对其帖子进行排序一样。我想要的是按照最新的或最受欢迎的方式对帖子进行排序,并按类别进行过滤。我可以管理的排序顺序,但我不确定如何通过选择哪个选项来动态更改它。这是一些示例代码。
<html>
<div id="sort-menu">
<span>Sort by</span>
<select>
<option>Newest first</option>
<option>Most popular</option>
</select>
<span>in</span>
<select>
<option>All</option>
<option>Category1</option>
<option>Category2</option>
<option>Category3</option>
</select>
</div>
</html>
答案 0 :(得分:2)
为了动态更改页面内容,您需要使用Javascript和AJAX。使用选择框,您需要让事件处理程序监视元素值的变化。在更改时,您解析该值并对服务器进行AJAX调用以提取要显示的数据。完成后,使用该数据填充页面上的内容。
另一个替代方案是,您可以加载所需的所有数据,虽然效率低,但只需隐藏不同的内容,直到用户在选项框中选择相应的选项。这个问题是如果你在这些页面中分布了大量内容,那么就会出现性能问题。
编辑(带示例代码):
<div id='content-one'>
...
</div>
<div id='content-two'>
...
</div>
<select id='choice'>
<option value='one'>Content One</option>
<option value='two'>Content Two</option>
</select>
<script>
$(function() {
// When our select changes, we execute a callback
$('#choice').change(function() {
var val = $('#choice').val();
// This implementation can be changed. This is just how I would do it
$.ajax({
type: 'GET',
url: 'path/to/content/' + val; // ie 'path/to/content/one' or 'path/to/content/two'
}).done(function(data){
if (val == 'one')
// Populate content for one
else
// Populate content for two
});
// Hide everything, then show the content that was selected
$("#content-one, #content-two").hide();
$("#content-" + val).show();
});
});
</script>