Javascript 如何根据数据属性获取HTML Select change事件以触发div的显示/隐藏？

我正在尝试使用一个下拉列表HTML Select，根据所选国家的数据属性是否存在来更改显示的div。因此，在下面的示例（）中，显示了3个div。如果我在下拉列表中选择“阿根廷”，则只有“巴西”和“墨西哥”的div应该消失（但只有“阿根廷”的div应该保留）。如果我选择“巴西”，那么只有“墨西哥”的那一个应该消失（另外两个只有“巴西”的应该留下。如果我选择“选择一个国家”（即value=“all”），它们都应该显示出来

它似乎有一半的效果，因为它至少尊重了select中的更改，但它隐藏了所有内容。如果我选择另一个选项，所有内容都将保持隐藏状态

你知道我的代码出了什么问题吗

HTML

.Row{
背景：灰色；
边框底部：1px白色固体；
}
巴西
墨西哥
阿根廷、墨西哥、巴西
选择一个国家
阿根廷
巴西
墨西哥

JS

功能评估卖家（$RELESER，checkedValues）{
//根据选定的值评估选定的经销商。
//确定是否至少有一个分销商的属性
//每种类型都可以在所选的值中找到。
var data=$reseller.data（）；
var=false；
$。每个（数据、函数（属性、值）{
values=values.split（'，'）.map（函数（值）{
返回值.trim（）；
});
在checkedValues和&values.containsAny中找到=prop（checkedValues[prop]）；
如果（！找到）{
返回false；
}
});
发现退货；
}
var$经销商=$（'.Row'）；
$（'select'）。在（'change'，function（）上{
var值=[]；
变量类型=$（this）.find（':selected'）.data（'type'）；
var value=$（this）.find（':selected'）.data（'value'）；
if（值的类型[类型]！=“对象”）{
值[类型]=[]；
}
值[类型]。推送（值）；
var checkedValues=值；
$RELESERS.每个（功能（k，RELESER）{
var$经销商=$（经销商）；
var found=evaluateReseller（$reseller，checkedValues）；
//如果每种类型至少选中一个值，则显示此分销商。
//否则，把它藏起来。
如果（找到）{
$resoller.show（）；
}否则{
$resoller.hide（）；
}
});
});

---

注意：上面的一些脚本说的好像有多个数据值要检查。这是因为即使我只处理“国家”现在，为了让它正常工作，我可能会添加更多的下拉列表来选择更多的值。

您可以使用

*=

检查数据属性是否包含单词，这使得这一切更加简单：

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

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

});

---

您可以使用

*=

检查数据属性是否包含单词，这使得这一切变得更简单：

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

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

});

---

您的EvaluaterSeller函数中有一些逻辑错误，因此我将其修复[

---

您的EvaluaterSeller函数中有一些逻辑错误，因此我将其修复[

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

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

});

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

  });

});