underscore-min.jsでドロップダウン項目で絞込み検索

Question

###前提・実現したいこと
３つの検索項目（ドロップダウンリスト）があり３つ選択して検索ボタンをクリックしたら
選択にあてはまる物が表示されるようにしたいのですが途中で分からなくなりご相談させてもらいました。

###該当のソースコード

<script type='text/javascript' src='/js/libs/underscore-min.js'></script> <form id="search" name="search"> 色を選択 <select id="color" name="color"> <option value="">指定しない</option> <option value="red">赤</option> <option value="blue">青</option> <option value="green">緑</option> </select> 形を選択 <select id="type" name="type"> <option value="">指定しない</option><option value="square">四角</option> <option value="circle">丸</option> </select> 人を選択 <select id="human" name="human"> <option value="">指定しない</option> <option value="yamada">山田</option> <option value="tanaka">田中</option> </select> <input type="submit" value="検索" /> </form> <div id="items"> <div class="item red square yamada"> 赤い四角山田</div> <div class="item red square tanaka"> 赤い四角田中</div> <div class="item red circle yamada"> 赤い丸山田</div> <div class="item red circle tanaka"> 赤い丸田中</div> <div class="item blue square yamada"> 青い四角山田</div> <div class="item blue square tanaka"> 青い四角田中</div> <div class="item blue circle yamada"> 青い丸山田</div> <div class="item blue circle tanaka"> 青い丸田中</div> <div class="item green square yamada"> 緑の四角山田</div> <div class="item green square tanaka"> 緑の四角田中</div> <div class="item green circle yamada"> 緑の丸山田</div> <div class="item green circle tanaka"> 緑の丸田中</div> </div> <script type="text/javascript"> var items = [ { "name" : "赤い四角山田", "color" : "red", "type" : "square", "human" : "yamada" }, { "name" : "赤い四角田中", "color" : "red", "type" : "square", "human" : "tanaka" }, { "name" : "赤い丸山田", "color" : "red", "type" : "circle", "human" : "yamada" }, "name" : "赤い丸田中", "color" : "red", "type" : "circle", "human" : "tanaka" }, { "name" : "青い四角山田", "color" : "blue", "type" : "square", "human" : "yamada" }, { "name" : "青い四角田中", "color" : "blue", "type" : "square", "human" : "tanaka" }, { "name" : "青い丸山田", "color" : "blue", "type" : "circle", "human" : "yamada" }, { "name" : "青い丸田中", "color" : "blue", "type" : "circle", "human" : "tanaka" }, { "name" : "緑の四角山田", "color" : "green", "type" : "square", "human" : "yamada" }, { "name" : "緑の四角田中", "color" : "green", "type" : "square", "human" : "tanaka" }, { "name" : "緑の丸山田", "color" : "green", "type" : "circle", "human" : "yamada" } { "name" : "緑の丸田中", "color" : "green", "type" : "circle", "human" : "tanaka" } ];

// 検索が押された時の処理
$('#search').on('submit' , function(event){
// デフォルトのイベントをキャンセル
event.preventDefault();

// 検索項目のオブジェクトを作成してセレクトボックスの値を格納
var query = {};
if($('#color').val() != ''){
query.color = $('#color').val();
}
if($('#type').val() != ''){
query.type = $('#type').val();
}
if($('#human').val() != ''){
query.human = $('#human').val();
}

// データの中から一致するオブジェクトを検索
var results = _.where(items, query);

// 返ってきた配列で出力処理
outputResults(results);
});

// 検索結果の出力処理
function outputResults(results){
// 変数の初期化
var html = '';

// 受け取った配列をループで処理
// 出力するHTMLの整形
jQuery.each(results, function() {
html += '<div class="item ' + this.color + ' ' + this.type + '' + this.human + '">';
html += this.name;
html += '</div>';
});

// HTMLに出力
$('#items').empty().append(html);
}

// ページ読み込み時はすべてのアイテムを出力する
$(window).on('load', function(){
outputResults(items);
});
</script>