How to get HTML Select change event to trigger show/hide of DIVs, dependent on data-attributes?

Question

I'm try to make a dropdown HTML Select change what divs are shown, based on whether a data-attribute for the chosen Country exists. So in the example below ( fiddle also here ), there are 3 divs showing. If I choose "Argentina" in the dropdown, the div with only "Brazil" and the div with only"Mexico" should go away (but the one with "Argentina" should stay). If I chose "Brazil", then the one with only "Mexico" should go away (and the other two with "Brazil" in them should stay. And if I were to choose "Select a Country" (ie value = "all"), they should all show.

It seems to be half working as it's at least respecting the change in the select, but it's hiding everything. And if I choose another option, everything stays hidden.

Any ideas what's wrong in my code?

HTML

.Row {
  background: gray;
  border-bottom: 1px white solid;
}

<div class="Row" id="reseller_allegiant" data-country="Brazil" data-tier="Elite Reseller">
  <div class="Copy">Brazil</div>
</div>

<div class="Row" id="reseller_folco" data-country="Mexico" data-tier="Preferred Reseller">
  <div class="Copy">Mexico</div>
</div>

<div class="Row" id="reseller_latin_telecom"  data-country="Argentina, Mexico, Brazil" data-tier="Authorized Reseller">
  <div class="Copy">Argentina; Mexico; Brazil</div>
</div>

<div id="controls">
<select name="country" id="country">
<option value="all" data-type='country' data-value='all'>Select a Country</option>
<option value="Argentina" data-type='country' data-value='Argentina'>Argentina</option>
<option value="Brazil" data-type='country' data-value='Brazil'>Brazil</option>
<option value="Mexico" data-type='country' data-value='Mexico'>Mexico</option>
</select>

</div>

JS

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      function evaluateReseller($reseller, checkedValues) {

  // Evaluate a selected reseller against chosen values.
  // Determine whether at least one of the reseller's attributes for
  // each type is found in the chosen values.

  var data = $reseller.data();
  var found = false;

  $.each(data, function(prop, values) {

    values = values.split(',').map(function(value) {
      return value.trim();
    });

    found = prop in checkedValues && values.containsAny(checkedValues[prop]);

    if (!found) {
      return false;
    }

  });

  return found;

}


var $resellers = $('.Row');
$('select').on('change', function() {
    var values = [];
    var type = $(this).find(':selected').data('type'); 
    var value = $(this).find(':selected').data('value'); 

    if (typeof values[type] !== "object") {
      values[type] = [];
    }

    values[type].push(value);

    var checkedValues = values;

    $resellers.each(function(k, reseller) {

      var $reseller = $(reseller);
      var found = evaluateReseller($reseller, checkedValues);

      // if at least one value of each type is checked, show this reseller.
      // otherwise, hide it.

      if (found) {
        $reseller.show();
      } else {
        $reseller.hide();
      }

  });

});

NOTE: Some of the script above talks as if there are multiple data values to check against. That's because even though I'm only dealing with "Country" right now to get it working, I will likely add more dropdowns for selecting more values.

Answer 1

You can use *= to check if a data-attribute contains a word, which makes this all much simpler:

$('select').on('change', function(e) {
var selectval = e.target.value;

  $('.Row').hide();
  $(`.Row[data-country*='${selectval}']`).show();

});

Answer 2

you have some logical errors in your evaluateReseller function so I fix it. [ https://jsfiddle.net/Lykh56e0/][jsfiddler]

function evaluateReseller($reseller, checkedValues) {

// Evaluate a selected reseller against checked values.
// Determine whether at least one of the reseller's attributes for
// each type is found in the checked values.

var data = $reseller.data();
var found = false;

$.each(data, function(prop, values) {

values = values.split(',').map(function(value) {
  return value.trim();
});

found = prop in checkedValues && values.find((v) => !!~checkedValues[prop].indexOf(v))
});

return found;

}


var $resellers = $('.Row');
$('select').on('change', function() {
  var values = [];
  var type = $(this).find(':selected').data('type');
  var value = $(this).find(':selected').data('value');

  if (typeof values[type] !== "object") {
    values[type] = [];
  }

  values[type].push(value);

  var checkedValues = values;

  $resellers.each(function(k, reseller) {

    var $reseller = $(reseller);
    var found = evaluateReseller($reseller, checkedValues);

    // if at least one value of each type is checked, show this reseller.
    // otherwise, hide it.

    if (found) {
      $reseller.show();
    } else {
      $reseller.hide();
    }

  });

});