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

Question

要解释我想做什么；

第一, 我制作了一个物体的 foreach，比如房子，它有它的属性，比如 size 和 numberFamiliars。

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

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

我想做的是当我 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 或此 class 与 select 上的 selected 项目建立关系 当 data-listServicios 和另一个数组中有相同的元素时，它们会添加一些 css class。 这就是我想要的

Answer 1

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

你可以这样做

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>

无论你想 select 什么都会出现在那里。您可以根据自己的需要进行最少的更改

Answer 2

有了你给我们的东西，我已经拟定了thisfiddle

它的作用是（使用您所说的事件）遍历 table 行，其中 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();

        });

这意味着什么时候隐藏什么时候显示。稍后我将 post 我自己的解决方案，虽然有点脏，但它是一个开始。我的做法....:[=12=]

尚未post编辑

但就像简历一样，这允许您使用数据属性过滤来自 html 中两个不同元素的数据，同时使用 select2 作为 dropdownSelectList。我会 post 我明天可能会回答

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

Hide a component using selected option in select2

html

javascript

jquery

jquery-select2