如何整合 sumoselect？

Question

我的js功底很低，很抱歉这个问题。我需要一个 multiselect 来过滤我的盒子。 sumoselect 插件看起来很智能，我可以运行它，但我不知道如何将它集成到我的盒子中。例如，如果我 select "Volvo & Mercedes" 在我的 multiselect 处，我希望其他框淡出。在 deselection 处显示了所有框。

这是我目前的状态：

}(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

如何整合 sumoselect？

How to integrate sumoselect?

javascript

jquery

sumoselect.js