Hide a component using selected option in select2
Question
Going to explain what I am trying to do;
First , I make a foreach of an object like a house, that has its properties, like a size and numberFamiliars .
Ok, that size has multiplied values like 1,2,3 and 4. But there is no 1 house, there are 30 houses, that have 4 values each one in the size property.
Them on the other side I have a dropdown select menu with Select2 jquery plugin .
What I am trying to do is when I select one property in the dropdownSelect2 like size = 4, them all the objects that don't have that property should have the display: none . How can I bind one to other??, I mean in the select2 I can take the id and in the foreach I can make a data-attribute to bind one to another but I don´t know how make it possible?
I mean given an id/name to that html element and them and do something like: if(select2HousePropertiesSelected === house.hasthatValueinHisPropetie) { show } else { hide } .
So this is what I am trying to do: I have this 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>
Now use this id or this class to make a relation to the selected items on the select When there are same elements in the data-listServicios and in the other array them add some css class. This is what I want
3 answers
solution1
1 2020-01-16 13:38:01
I am assuming you want to show what you select from a select box.
you can do it like this
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>
Whatever you'll select will appear there. you can modify with your needs with minimal changes
solution2
1 ACCPTED 2020-01-16 16:58:37
with what you have given us, i have drawn up this fiddle
what it does is (using the event you have said you use) iterates through the table rows where the data-listService attribute contains the code, and then hides it.
$(document).ready(function()
{
$('.listboxServices').select2()
.on('select2:select', (e) =>
{
$(this).val().forEach(f=>
{
$('tr[data-listServices="'+f+'"]').hide();
});
});
});
solution3
0 2020-01-17 10:43:52
Ok I´ll Explain what I did, but first @Qpirate did it perfect, I just modified a bit that code to look like this:
$('#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();
});
This means when to hide and when to show. Later I´ll post my own solution that is a little dirty but its a start. The way I did it.... :
not posted yet
But just as a resume this allow you to filter data from two different elements in the html using data-attributes using also select2 as a dropdownSelectList. I´ll post my answer probably tomorrow
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.