[英]Hide a component using selected option in select2
將解釋我正在嘗試做的事情；
首先，我創建了一個像房子這樣的對象的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 類。 這就是我要的
我假設您想顯示您從選擇框中選擇的內容。
你可以這樣做
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>
無論您選擇什么，都會出現在那里。 您可以根據您的需要進行修改，只需進行最少的更改
用你給我們的東西，我畫了這個小提琴
它的作用是（使用您所說的事件）遍歷表行，其中data-listService屬性包含代碼，然后隱藏它。
$(document).ready(function()
{
$('.listboxServices').select2()
.on('select2:select', (e) =>
{
$(this).val().forEach(f=>
{
$('tr[data-listServices="'+f+'"]').hide();
});
});
});
好的，我會解釋我做了什么，但首先@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 jquery 或 javascript 中的下一個 select 框中隱藏所選選項
[英]Hide selected option in next select box in select2 jquery or javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.