jQuery "contains word" selector does not work as expected

Question

I’m trying to use the "contains word selector" from jQuery to hide/show some elements dynamically on my page, however the selector is not working as expected. I am using the version 3.1.1 jQuery.

Note by snippet that the code considers only the last value of the attribute when selected, therefore in cases B and C there is the impression that the selection worked.. however the options A/B and A/C should also be visible when the option To is selected again..

Does anyone have any idea why this is? Is it a bug? Or is it how it should really work? (That’s not what documentation).

Thank you in advance!

var options = {
  A: $('*[data-visibleOn~="A"]'),
  B: $('*[data-visibleOn~="B"]'),
  C: $('*[data-visibleOn~="C"]'),
}


$("#opt").on('change', function(evt) {
	var selected = $(this).val();
  
  for(var key in options) {
  	if(options.hasOwnProperty(key)) {
    	if(key == selected) {
      	options[key].show();
      } else {
      	options[key].hide();
      }
    }
  }
})

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


<select name="option" id="opt">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>



<div data-visibleOn="A">A</div>
<div data-visibleOn="A B">A ou B</div>
<div data-visibleOn="B">B</div>
<div data-visibleOn="A C">A ou C</div>
<div data-visibleOn="C">C</div>

Answer 1

One way for you to implement this is to erase all items before showing them:

$(function() {
  var options = {
    A: $('[data-visibleOn~="A"]'),
    B: $('[data-visibleOn~="B"]'),
    C: $('[data-visibleOn~="C"]')
  };

  $("#opt").on("change", function(evt) {
      $('[data-visibleOn]').hide();    
      var selected = $(this).val();

      options[selected].show();

   }).trigger("change");
});

The problem is that you make one .hide() items that contain "A", for example, but are in the other sets.

DEMO

Answer 2

Using the method $.prop() you can pass a function that will be executed for each element.

In this function you can use the method $.is() to test if the element matches the selector passed to change any property that is needed.

In the example below I used the global attribute hidden for that reason.

let $data = $("[data-visibleOn]");

$("#opt").on('change', function(evt) {
    let value = this.value;
    
    $data.prop('hidden', function() {
      return !$(this).is(`[data-visibleOn~="${value}"]`);
    });
})

[hidden] {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<select name="option" id="opt">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<div data-visibleOn="A">A</div>
<div data-visibleOn="A B">A ou B</div>
<div data-visibleOn="B">B</div>
<div data-visibleOn="A C">A ou C</div>
<div data-visibleOn="C">C</div>