Как сохранить функциональность флажков вместо выпадающего списка?

Question

У меня был этот код ниже, который будет фильтровать, какие div будет отображаться на основе выбора флажков. Каждый раз, когда флажок был отмечен / снят, код будет проверять, существует ли атрибут данных для каждого флажка и, если да, показывать div. Если нет, спрячьте div.

<style>
.Row {
  background: gray;
  border-bottom: 1px white solid;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="Row sel" id="reseller_allegiant" data-region="Americas" data-country="Brazil" data-tier="Elite Reseller">
      <div class="Heading">Allegiant Technology</div>
      <div class="Copy">Brazil</div>
      <div class="Copy">Elite Reseller</div>
    </div>

    <div class="Row sel" id="reseller_folco" data-region="APAC" data-country="Mexico" data-tier="Preferred Reseller">
      <div class="Heading">Folco Communications</div>
      <div class="Copy">Mexico</div>
      <div class="Copy">Preferred Reseller</div>
    </div>

    <div class="Row sel" id="reseller_latin_telecom" data-region="EMEA" data-country="Argentina, Mexico, Brazil" data-tier="Authorized Reseller">
      <div class="Heading">Latin Telecom</div>
      <div class="Copy">Argentina; Mexico; Brazil</div>
      <div class="Copy">Authorized Reseller</div>
    </div>

    <div id="controls">
      <span class="title">Region:</span><br>
      <input class="css-checkbox" type="checkbox" id="APAC" data-type="region" data-value="APAC" checked>
      <label for="APAC" class="css-label">APAC</label>
      <input class="css-checkbox" type="checkbox" id="EMEA" data-type="region" data-value="EMEA" checked>
      <label for="EMEA" class="css-label">EMEA</label>
      <input class="css-checkbox" type="checkbox" id="Americas" data-type="region" data-value="Americas" checked>
      <label for="Americas" class="css-label">Americas</label>
      <br>
      <br>
      <span class="title">Partner Type:</span><br>
      <input class="css-checkbox" type="checkbox" id="Preferred" data-type='tier' data-value='Preferred Reseller' checked>
      <label for="Preferred" class="css-label">Preferred</label>
      <input class="css-checkbox" type="checkbox" id="Elite" data-type='tier' data-value='Elite Reseller' checked>
      <label for="Elite" class="css-label">Elite</label>
      <input class="css-checkbox" type="checkbox" id="Authorized" data-type='tier' data-value='Authorized Reseller' checked>
      <label for="Authorized" class="css-label">Authorized</label>
      <br>
      <br>
      <span class="title">Country:</span><br>
      <input class="css-checkbox" type="checkbox" id="Argentina" data-type='country' data-value='Argentina' checked>
      <label for="Argentina" class="css-label">Argentina</label>
      <input class="css-checkbox" type="checkbox" id="Brazil" data-type='country' data-value='Brazil' checked>
      <label for="Brazil" class="css-label">Brazil</label>
      <input class="css-checkbox" type="checkbox" id="Mexico" data-type='country' data-value='Mexico' checked>
      <label for="Mexico" class="css-label">Mexico</label>
    </div>
    <br><br><br>
    <select name="country" id="country">
    <option value="all">Select a Country</option>
    <option value="Argentina">Argentina</option>
    <option value="Brazil">Brazil</option>
    <option value="Mexico">Mexico</option>
    </select>

Сегодня я добавил код HTML Select внизу, потому что мы хотим изменить флажки Country, чтобы они были просто выпадающими, потому что их будет TON. Итак, еще раз, это новый HTML для этого:

 <select name="country" id="country">
    <option value="all">Select a Country</option>
    <option value="Argentina">Argentina</option>
    <option value="Brazil">Brazil</option>
    <option value="Mexico">Mexico</option>
    </select>

Вот оригинальный JS / JQuery, который работал нормально:

Array.prototype.indexOfAny = function(array) {
  return this.findIndex(function(v) {
    return array.indexOf(v) != -1;
  });
}

Array.prototype.containsAny = function(array) {
  return this.indexOfAny(array) != -1;
}



function getAllChecked() {

  // build a multidimensional array of checked values, organized by type

  var values = [];
  var $checked = $checkboxes.filter(':checked');

  $checked.each(function() {

    var $check = $(this);
    var type = $check.data('type');
    var value = $check.data('value');

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

    values[type].push(value);

  });

  return values;

}

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.containsAny(checkedValues[prop]);

    if (!found) {
      return false;
    }

  });

  return found;

}


var $checkboxes = $('[type="checkbox"]');
var $resellers = $('.Row.sel');

$checkboxes.on('change', function() {

  // get all checked values.
  var checkedValues = getAllChecked();

  // compare each resellers attributes to the checked 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();
    }

  });

});

Я скопировал флажок «изменить» в качестве шаблона и добавил этот код ниже для обработки получения выбранной страны и проверки ее по атрибутам данных, но, похоже, это ничего не делает, так что ясно, что я что-то делаю неправильно.

var $countryselect = $( "#country" );
$countryselect.on('change', function() {
    var thecountry =  $( "#country" ).val();

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

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

    // if the resellers country is selected, show this reseller.
    // otherwise, hide it.

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

  });
})

Есть идеи / предложения? Вот Fiddle ПРИМЕЧАНИЕ: у меня нет нового бита Jquery в скрипте (так как он не работает), так что вы можете увидеть, как он работал изначально.

В двух словах, я хочу, чтобы новый раскрывающийся список Выбор страны делал то же самое, что и над флажками Страна над ним, а затем я бы удалил флажки Страна. Поэтому, если атрибут data-country элемента div включает выбранную страну, покажите элемент div, в противном случае скрывайте его. И я также хочу, чтобы другие существующие фильтры флажков (для региона и типа партнера) продолжали работать вместе с новой опцией выбора HTML.