我使用插件list.js对项目列表进行排序。目前该示例显示了一个用于过滤的搜索栏,我想使用下拉选项来更精确地过滤两种材料" glass"和"塑料"。
这是我的小提琴:http://jsfiddle.net/32u3t1g9/6/(授予list.js不能很好地发挥它。)
编辑:更新了jquery插件
这是我的代码:
HTML
<div id="container">
<div class="page">
<div>
<h1>piece-y search</h1>
</div>
<div id="main">
<div class="c1">
<h2>piece search</h2>
<div id="piece-search">
<ul class="sort-by">
<li>
<input class="search" placeholder="Search pieces" />
</li>
<li class="sort btn" data-sort="type">Sort by type</li>
<li class="sort btn" data-sort="thickness">Sort by thickness</li>
<li class="sort btn" data-sort="height">Sort by height</li>
<li class="sort btn" data-sort="category">Sort by style</li>
</ul>
<ul class="filter">
<li>
<select name="material" id="filter-material">
<option selected="selected" value="material">Select a Material</option>
<option value="material">Plastic</option>
<option value="material">Glass</option>
</select>
</li>
<li class="btn" id="filter-none">Show all</li>
<li class="btn" id="filter-scientific" value="category">Only show scientific glass</li>
<li class="btn" id="filter-artsy" value="category">Only show artsy glass</li>
</ul>
<ul class="list">
<li class="item">
<p class="sorting-info hide-this">
<p class="material">plastic</p>
<p class="type">pipe</p>
<p class="thickness">3mm</p>
<p class="height">15inch+</p>
<p class="category">artsy</p>
</p>
</li>
<li class="item">
<p class="sorting-info hide-this">
<p class="material">glass</p>
<p class="type">pipe</p>
<p class="thickness">5mm</p>
<p class="height">14inch-</p>
<p class="category">scientific</p>
</p>
</li>
</ul>
</div>
</div>
</div>
</div> <!-- end of #container -->
JS
var options = {
valueNames: [ 'material', 'type', 'thickness', 'height', 'category' ]
};
var featureList = new List('piece-search', options);
$('#filter-material').change(function () {
var selection = this.value;
// filter items in the list
featureList.filter(function (item) {
if (item.values().material == selection) {
return true;
} else {
return false;
}
});
});
$('#filter-scientific').click(function() {
featureList.filter(function(item) {
if (item.values().category == "scientific") {
return true;
} else {
return false;
}
});
return false;
});
$('#filter-artsy').click(function() {
featureList.filter(function(item) {
if (item.values().category == "artsy") {
return true;
} else {
return false;
}
});
return false;
});
$('#filter-none').click(function() {
featureList.filter();
return false;
});
答案 0 :(得分:5)
您需要更改选择选项的值:
<select name="material" id="filter-material">
<option selected="selected" value="">Select a Material</option>
<option value="plastic">Plastic</option>
<option value="glass">Glass</option>
</select>
然后,change-event处理程序可能如下所示:
$('#filter-material').change(function () {
var selection = this.value;
if (selection) {
featureList.filter(function(item) {
return (item.values().material == selection);
});
} else {
featureList.filter();
}
});
答案 1 :(得分:4)
当只有一个选择列表时,接受的答案可以正常工作,但如果有更多选择列表则会失败。这是一种使用任意数量的选择过滤器完成相同操作的方法。
ng-click="yourfunction($event)"
<select name="material" class="select-filter">
<option selected="selected" value="">Select a Material</option>
<option value="plastic">Plastic</option>
<option value="glass">Glass</option>
</select>