Как получить HTML Выберите событие изменения, чтобы вызвать показ / скрытие DIV, в зависимости от атрибутов данных?

Question

Я пытаюсь сделать раскрывающийся список HTML Выберите изменить отображаемые элементы div в зависимости от того, существует ли атрибут данных для выбранной страны. Таким образом, в приведенном ниже примере ( fiddle также здесь ) показаны 3 деления. Если я выберу «Аргентина» в выпадающем списке, div с только «Brazil» и div с только «Mexico» должен исчезнуть (но тот, у которого «Argentina» должен остаться). Если я выбрал «Бразилию», то тот, у которого есть только «Мексика», должен исчезнуть (а два других с «Бразилией» в них должны остаться. И если бы я выбрал «Выбрать страну» (т.е. значение = «все») ), они все должны показать.

Кажется, это наполовину работает, так как, по крайней мере, учитывает изменение выбора, но скрывает все. И если я выберу другой вариант, все останется скрытым.

Есть идеи, что не так в моем коде?

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

  });

});

ПРИМЕЧАНИЕ. Некоторые из приведенных выше сценариев говорят так, как будто существует несколько значений данных для проверки. Это потому, что, хотя сейчас я работаю только со «Страной», чтобы работать, я, скорее всего, добавлю больше выпадающих меню для выбора большего количества значений.

Answer 1

у вас есть логические ошибки в вашей функцииvaluReseller, поэтому я исправляю это. [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();
    }

  });

});

Answer 2

Вы можете использовать *=, чтобы проверить, содержит ли атрибут данных слово, что делает все это намного проще:

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

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

});