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

Question

将解释我正在尝试做的事情；

首先，我创建了一个像房子这样的对象的foreach ，它有它的属性，比如size和numberFamiliars 。

好的，这个size乘以 1,2,3 和 4 等值。但是没有 1 所房子，有 30 所房子，在size属性中每个都有 4 个值。

另一方面，我有一个带有Select2 jquery plugin的dropdown select菜单。

我想要做的是，当我在 dropdownSelect2 中选择一个属性（如 size = 4）时，所有没有该属性的对象都应该display: none 。 我怎样才能将一个绑定到另一个？？我的意思是在 select2 中我可以获取id并且在 foreach 中我可以创建一个data-attribute来将一个绑定到另一个但我不知道如何使它成为可能？

我的意思是给那个 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 或这个类来与 select 上的选定项目建立关系当 data-listServicios 和另一个数组中有相同的元素时，它们会添加一些 css 类。 这就是我要的

Answer 1

我假设您想显示您从选择框中选择的内容。

你可以这样做

 function myFunction() { var x = document.getElementById("myDIV"); var s = document.getElementById("select"); var selectedValue = "You Selected: "+s.options[s.selectedIndex].value; x.innerHTML = selectedValue; }

 <!DOCTYPE html> <html> <body> <select onchange="myFunction()" id="select"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <div id='myDIV'> Select you Choice :-) </div> </body> </html>

无论您选择什么，都会出现在那里。 您可以根据您的需要进行修改，只需进行最少的更改

Answer 2

用你给我们的东西，我画了这个小提琴

它的作用是（使用您所说的事件）遍历表行，其中data-listService属性包含代码，然后隐藏它。

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

        });
});

Answer 3

好的，我会解释我做了什么，但首先@Qpirate 做得很完美，我只是修改了一点代码，看起来像这样：

$('#HotelAvailSideFilterResult_serviciosID').on('select2:select', function (e) {
            var data = e.params.data;
            console.log(data);

            $('tr[data-listServices*="' + data.id + '"]').hide();

        });
$('#HotelAvailSideFilterResult_serviciosID').on('select2: unselect', function (e) {
            var id = ',' + e.params.data.id + ',';
            console.log(id);

            $('tr[data-listServices*=",'+ id+',"]').show();

        });

这意味着什么时候隐藏，什么时候显示。 稍后我会发布我自己的解决方案，它有点脏，但它是一个开始。 我这样做的方式....：

还没有发布

但就像简历一样，这允许您使用数据属性过滤来自 html 中两个不同元素的数据，也使用select2作为下拉选择列表。 我可能明天会发布我的答案

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

问题描述

3 个解决方案

解决方案1
1 2020-01-16 13:38:01

解决方案2
1 已采纳 2020-01-16 16:58:37

解决方案3
0 2020-01-17 10:43:52

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

问题描述

3 个解决方案

解决方案1 1 2020-01-16 13:38:01

解决方案2 1 已采纳 2020-01-16 16:58:37

解决方案3 0 2020-01-17 10:43:52

解决方案1
1 2020-01-16 13:38:01

解决方案2
1 已采纳 2020-01-16 16:58:37

解决方案3
0 2020-01-17 10:43:52