javascript - 使用 select2 中选定的选项隐藏组件

Question

解释我想要做什么；

首先，我做了一个foreach像房子这样的物体，有它的属性，比如 size和numberFamiliars .

好的，那个size具有乘法值，如 1、2、3 和 4。但是，size 中没有 1 栋房子，而是 30 栋房子，每栋都有 4 个值。属性。

在另一边我有一个 dropdown select菜单 Select2 jquery plugin .

我想做的是，当我在 dropdownSelect2 中选择一个属性(例如 size = 4)时，所有不具有该属性的对象都应具有 display: none 。我怎样才能将一个绑定(bind)到另一个？？，我的意思是在 select2 中我可以采用 id在 foreach 中我可以创建 data-attribute将一个绑定(bind)到另一个，但我不知道如何实现？

我的意思是给那个 html 元素和它们一个 id/name 并做类似的事情: if(select2HousePropertiesSelected === house.hasthatValueinHisPropetie)
{ show } else { hide } .

这就是我正在尝试做的事情:我有这个select :

<select class="listboxServices select2-hidden-accessible" id="HotelAvailSideFilterResult_serviciosID" multiple="" name="HotelAvailSideFilterResult.serviciosID" tabindex="-1" aria-hidden="true">
<option value="abc">zyz</option>
<option value="cba">xyz</option>

and go on..
</select>

现在使用此 id 或此类与选择上的所选项目建立关系当 data-listServicios 中有相同的元素并且在另一个数组中它们添加一些 css 类时。这就是我想要的

Answer 1

根据您给我们的信息，我制定了 this fiddle

它的作用是(使用您所说的使用的事件)迭代 data-listService 属性包含代码的表行，然后隐藏它。

$(document).ready(function() 
{
    $('.listboxServices').select2()
        .on('select2:select', (e) =>
        {
            $(this).val().forEach(f=>
            {
                $('tr[data-listServices="'+f+'"]').hide();
            });

        });
});