我已经成功地为一些下拉/选择框实现了神话般的 MixItUp 代码。我已经尝试遵循高级教程，但使用这两种逻辑的一个使用复选框，我不知道如何使它适用于选择框。此外，只有一组选择框需要 OR 逻辑，其余的都需要 AND。
逻辑如下：
学校科目 AND 最低成绩 AND 最高成绩 AND （第一语言或第二语言）。
过滤器控件如下：
<form class="controls form-horizontal" id=Filters>
<fieldset class=MixItUpfilters>
<legend>Filters</legend>
<div class=form-group>
<label for=selectSubject class="col-md-3 control-label">with the school subject of</label>
<div class=col-md-9>
<fieldset>
<select id=selectSubject class="form-control input-sm">
<option value="">-- select a school subject --</option>
<option value=".subject-1">Subject 1</option>
<option value=".subject-2">Subject 2</option>
<option value=".subject-3">Subject 3</option>
</select>
</fieldset>
</div>
</div>
<div class=form-group>
<label for=selectMinGrade class="col-md-3 control-label">for grades </label>
<div class=col-md-9>
<fieldset class=inline>
<select id=selectMinGrade class="form-control input-sm">
<option value="">-- select a minimum grade --</option>
<option value=".min-grade-01">Grade 1</option>
<option value=".min-grade-02">Grade 2</option>
<option value=".min-grade-03">Grade 3</option>
</select>
</fieldset>
<label>to </label>
<fieldset class=inline>
<select id=selectMaxGrade class="form-control input-sm">
<option value="">-- select a maximum grade --</option>
<option value=".max-grade-01">Grade 1</option>
<option value=".max-grade-02">Grade 2</option>
<option value=".max-grade-03">Grade 3</option>
</select>
</fieldset>
</div>
</div>
<div class=form-group>
<label for=selectFirstLanguage class="col-md-3 control-label">in First language</label>
<div class=col-md-9>
<fieldset class=inline>
<select id=selectFirstLanguage class="form-control input-sm">
<option value="">-- select a language --</option>
<option value=".first-language-english">English</option>
<option value=".first-language-afrikaans">Afrikaans</option>
<option value=".first-language-zulu">Zulu</option>
</select>
</fieldset>
<label>or second language</label>
<fieldset class=inline>
<select id=selectSecondLanguage class="form-control input-sm">
<option value="">-- select a language --</option>
<option value=".second-language-english">English</option>
<option value=".second-language-afrikaans">Afrikaans</option>
<option value=".second-language-zulu">Zulu</option>
</select>
</fieldset>
</div>
</div>
</fieldset>
</form>
并且 javascript 是（注意：我使用 jQuery 而不是 $ 因为这是一个 WordPress 网站）：
<script>
// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "dropdownFilter".
var dropdownFilter = {
// Declare any variables we will need as properties of the object
jQueryfilters: null,
jQueryreset: null,
groups: [],
outputArray: [],
outputString: '',
// The "init" method will run on document ready and cache any jQuery objects we will need.
init: function(){
var self = this;
/* As a best practice, in each method we will assign "this" to the variable "self"
so that it remains scope-agnostic. We will use it to refer to the parent "dropdownFilter"
object so that we can share methods and properties between all parts of the object.
*/
self.jQueryfilters = jQuery('#Filters');
self.jQueryreset = jQuery('#Reset');
self.jQuerycontainer = jQuery('#Container');
self.jQueryfilters.find('fieldset').each(function(){
self.groups.push({
jQuerydropdown: jQuery(this).find('select'),
active: ''
});
});
self.bindHandlers();
},
// The "bindHandlers" method will listen for whenever a select is changed.
bindHandlers: function(){
var self = this;
// Handle select change
self.jQueryfilters.on('change', 'select', function(e){
e.preventDefault();
self.parseFilters();
});
// Handle reset click
self.jQueryreset.on('click', function(e){
e.preventDefault();
self.jQueryfilters.find('select').val('');
self.parseFilters();
});
},
// The parseFilters method pulls the value of each active select option
parseFilters: function(){
var self = this;
// loop through each filter group and grap the value from each one.
for(var i = 0, group; group = self.groups[i]; i++){
group.active = group.jQuerydropdown.val();
}
self.concatenate();
},
// The "concatenate" method will crawl through each group, concatenating filters as desired:
concatenate: function(){
var self = this;
self.outputString = ''; // Reset output string
for(var i = 0, group; group = self.groups[i]; i++){
self.outputString += group.active;
}
// If the output string is empty, show all rather than none:
!self.outputString.length && (self.outputString = 'all');
console.log(self.outputString);
// ^ we can check the console here to take a look at the filter string that is produced
// Send the output string to MixItUp via the 'filter' method:
if(self.jQuerycontainer.mixItUp('isLoaded')){
self.jQuerycontainer.mixItUp('filter', self.outputString);
}
}
};
// On document ready, initialise our code.
jQuery(function(){
// Initialize dropdownFilter code
dropdownFilter.init();
// Instantiate MixItUp
jQuery('#Container').mixItUp({
controls: {
enable: false // as we are interacting via the API, we can disable default controls to increase performance
},
callbacks: {
onMixFail: function(){
console.log('No items were found matching the selected filters.');
}
},
layout: {
containerClassFail: 'none-found'
}
});
});
</script>