javascript - 如何集成 sumoselect？

Question

我的js水平很低，很抱歉问这个问题。我需要多选来过滤我的框。 sumoselect插件看起来很聪明，我能够运行它，但我不知道如何将它集成到我的盒子中。例如，如果我在多重选择中选择“沃尔沃和梅赛德斯”，我希望其他框淡出。取消选择时，将显示所有框。

这就是我目前的状态:

}(jQuery));

$(document).ready(function () {

    $('.select').on('change', function(e) {
        console.log($(this).val()) // value
    }).SumoSelect({})

    $('#submit').click(function(e){
        e.preventDefault();
        var v = $('#uq').val();
        alert(v);
    });
});

The Fiddle

感谢您的帮助。

Answer 1

如果修改box html 有点包含 <select> 的值

 <span class="box" data-select_match="bmw">BMW</span>

然后您可以根据添加的属性过滤框:

var $boxes = $('.box');
$('.select').on('change', function(e) {
    var selected = $(this).val();
    if(!selected ){
        $boxes.show()
    }else{
        $boxes.hide().filter(function(){ // hide boxes then filter what gets shown
            var select_match = $(this).data('select_match');
            return selected.indexOf(select_match) > -1;
        }).show();
    }       
}).SumoSelect({})

DEMO