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

【问题标题】：Hide a component using selected option in select2使用 select2 中的选定选项隐藏组件
【发布时间】：2020-01-16 12:45:53
【问题描述】：

解释我要做什么；

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

好的，size 具有相乘的值，例如 1、2、3 和 4。但是没有 1 个房子，有 30 个房子，在 size 属性中每个有 4 个值。

他们在另一边我有一个dropdown select 菜单和Select2 jquery plugin。

我想要做的是，当我在 下拉选择2 中选择一个属性（如 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 类。这就是我想要的

【问题讨论】：

你也可以用简单的js来做到这一点......
是的，但这是我在 JS 的第二天，我需要更多，你能解释一下吗？这个想法是在 Select2 中选择了一个选项，其中值与显示的属性相同，它们隐藏了我的其他组件
你能告诉我你想做什么，我可以帮助你
我有一个带有选项的选择，它们在另一边我有一个带有这些选项的数据属性的对象，当在选择中选择一个选项时，对具有该选项的对象执行某些操作/特性。我解释的对吗？
您好 Qiqke，为了在此表单上获得良好的响应，您能否向我们提供您的 html 的简单实现，这将使我们对您的代码结构有一个很好的了解。跨度>

标签： javascript jquery html jquery-select2

【解决方案1】：

用你给我们的东西，我起草了thisfiddle

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

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

        });
});

【讨论】：

哦，伙计，你是个怪物！！，我做了一个解决方案，但明天我会告诉你这是如何工作的，肯定比我的更好，所以恭喜！明天我会给你绿勾！
这是一个非常快速的编辑，可能有更好的方法让它工作，但应该让你知道如何让它工作

【解决方案2】：

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

你可以这样做

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>

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

【讨论】：

你能解释一下吗？我正在使用 Select2 和 selectedItem
你只需要我写的js函数以及你想在哪个元素上添加它，就像我在文本框上所做的那样。
要编辑问题，如果你有时间请看一下:)
如果你得到你的答案，请确保你点击我的答案上的右键
我必须吃点东西，但看起来不错你的问题让我等了一个小时，我回来找你

【解决方案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 作为下拉选择列表。我可能会在明天发布我的答案

【讨论】：