CODEWITHSUNDEEP
javascriptjqueryhtmljquery-select2
Qiqke
Qiqke

Reputation: 486

Hide a component using selected option in select2

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

Upvotes: 3

Views: 1827

Answers (3)

Qiqke
Qiqke

Reputation: 486

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

Upvotes: 0

Qpirate
Qpirate

Reputation: 2078

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();
            });

        });
});

Upvotes: 1

Deepak Singh
Deepak Singh

Reputation: 94

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

Upvotes: 1

Related Questions