Javascript 基于匹配的json数据显示/隐藏div

我有一个从JSON文件加载所有数据的函数，如果

data[I]['brand\u id']==modelId

<script>
    function loadModel(modelId) {
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: '/api/model.json',
            success: function (data) {
                $.each(data, function (i, v) {
                    if (data[i]['brand_id'] == modelId) {
                        $('#item-brand-list').append('<option data-brand-id="' + modelId + '" value="' + data[i]['id'] + '">' + data[i]['name'] + '</li>');
                    }
                });

            }
        });
    }
</script>

HTML:

--挑选--

但是没有成功，我认为显示隐藏

div

是错误的逻辑

---

有什么建议吗？

尝试使用以下方法：

function loadModel(modelId) {
  $.ajax({
    type: "POST",
    dataType: 'json',
    url: '/api/model.json',
    success: function(data) {
      var foundMatch = false;
      $.each(data, function(i, v) {
        if (data[i]['brand_id'] == modelId) {
          $("#select-ads-brand").show(); // if match found show the div
          $('#item-brand-list').append('<option data-brand-id="' + modelId + '" value="' + data[i]['id'] + '">' + data[i]['name'] + '</li>');
          foundMatch = true; // set variable to true on success of match
        }
      });
      // if no match found simply hide the div
      if(!foundMatch) $("#select-ads-brand").hide();


    }
  });
}

函数加载模型（modelId）{
$.ajax({
类型：“POST”，
数据类型：“json”，
url:“/api/model.json”，
成功：功能（数据）{
var foundMatch=false；
$。每个（数据、功能（i、v）{
如果（数据[i]['brand_id']==modelId）{
$（“#选择广告品牌”）.show（）；//如果找到匹配项，则显示div
$（“#商品品牌列表”）.append（“+data[i]['name']+'”）；
foundMatch=true；//匹配成功时将变量设置为true
}
});
//如果没有找到匹配项，只需隐藏div
如果（！foundMatch）$（“#选择广告品牌”）.hide（）；
}
});
}

您只需使用函数并执行如下检查即可

const filtereddata = data.filter(ele => ele['brand_id']==modelId);
if(filtereddata.length > 0)
{
  //add filtered data
  $.each(filtereddata, function (i, v) {
                    $('#item-brand-list').append('<option data-brand-id="' + 
                     modelId + '" value="' + data[i]['id'] + '">' + data[i]
                      ['name'] + '</li>');

            });
  //show
   $('#select-ads-brand').show();
}
else 
{
  //hide
   $('#select-ads-brand').hide();
}

const filtereddata=data.filter（ele=>ele['brand\u id']==modelId）；
如果（filtereddata.length>0）
{
//添加过滤数据
$。每个（过滤器数据、函数（i、v）{
$（“#项目品牌列表”）。附加（“”+数据[i]
['name']+''）；
});
//展示
$（“#选择广告品牌”）.show（）；
}
其他的
{
//隐藏
$（“#选择广告品牌”）.hide（）；
}

尝试使用此选项显示：$（'select ads brand'）.css（'display'，'block'），使用此选项隐藏：$（'select ads brand'）.css（'display'，'none'）@rohankangale

.show（）

和

.hide（）

做同样的事情。在plnk中用一个假json req（超时）做完整的流，我们会修复它，因为你不能对div使用show/hide函数。你必须使用“display”属性。问题是你正在循环数据，所以，它可能在一开始隐藏元素，但在最后一次迭代中再次显示它，就像条件通过一样。

<div id="select-ads-brand">
    <select id="item-brand-list">
        <option>-- Select --</option>
    </select>
</div>

function loadModel(modelId) {
  $.ajax({
    type: "POST",
    dataType: 'json',
    url: '/api/model.json',
    success: function(data) {
      var foundMatch = false;
      $.each(data, function(i, v) {
        if (data[i]['brand_id'] == modelId) {
          $("#select-ads-brand").show(); // if match found show the div
          $('#item-brand-list').append('<option data-brand-id="' + modelId + '" value="' + data[i]['id'] + '">' + data[i]['name'] + '</li>');
          foundMatch = true; // set variable to true on success of match
        }
      });
      // if no match found simply hide the div
      if(!foundMatch) $("#select-ads-brand").hide();


    }
  });
}

const filtereddata = data.filter(ele => ele['brand_id']==modelId);
if(filtereddata.length > 0)
{
  //add filtered data
  $.each(filtereddata, function (i, v) {
                    $('#item-brand-list').append('<option data-brand-id="' + 
                     modelId + '" value="' + data[i]['id'] + '">' + data[i]
                      ['name'] + '</li>');

            });
  //show
   $('#select-ads-brand').show();
}
else 
{
  //hide
   $('#select-ads-brand').hide();
}