Javascript 基于div的一个JSON值使用JS选择框隐藏div

我需要帮助让我的Javascript为select下拉菜单工作，该下拉菜单将根据JSON中的数据值隐藏一个div。我有一个page/larvel刀片，它使用foreach循环加载家具组，并将它们包含在名为.group container的div中。这一切都是通过一个控制器完成的，该控制器将订单构建到一个名为$orderFormData的变量中，然后从中构建组和单个产品

这是主要的基本结构，所以你有一个想法：

@foreach ($orderFormData->pgroups as $pgroup)
<div class="group-container">
        <h3 style="font-size: 26px; padding: 10px 0;">{{ $pgroup->group_name }} - {{ $pgroup->group_code }}</h3>
        <p class="uk-text-muted" style="font-size: 20px;" >{!! html_entity_decode($pgroup->group_desc) !!}</p> <!--Group Description-->

            @foreach ($pgroup->pskus as $psku)

            //table of rows for info

                    @endforeach
                    </tbody>
                </table>
            </div>

        </div>
@endforeach

下面是Javascript：

<script type="text/javascript">
$(function(){
var topsellers = "<?php echo $pgroups->topseller; ?>";
var reorder    = "<?php echo $pgroups->reorder; ?>";
//console.log( topsellers );
$('#filterText').on('change', function() {
  var currentVal = $(this).val();

  if (currentVal == 'popularity' && topsellers == "1" || currentVal == 'recently_ordered' && reorder == "1") {

    $(".groupcontainer").show();
   } else {
    $(".groupcontainer").hide();
   }
  });
});
</script>

---

我在想/希望我只是宣布了一些错误，但JS和JSON不是我的舵手。我只需要确保所有内容都正确映射，以便根据这些值和下拉选择显示/隐藏div。非常感谢您的帮助

从您的代码中，topsellers和reorder变量被分配给OUP输出的任何值，我没有看到第一个组的It输出为false，因为它的topseller值为0。因此，如果我从屏幕截图中展开json对象中的所有组，其中一些组的值为1或0。基本上，现在我知道json对象具有这些值，我只需要确保我声明的变量是正确的。如果它输出为false，您的测试topseller==1不应该这样说吗！topseller，或topseller===false？或topseller===false这实际上是一个字符串吗？

<script type="text/javascript">
$(function(){
var topsellers = "<?php echo $pgroups->topseller; ?>";
var reorder    = "<?php echo $pgroups->reorder; ?>";
//console.log( topsellers );
$('#filterText').on('change', function() {
  var currentVal = $(this).val();

  if (currentVal == 'popularity' && topsellers == "1" || currentVal == 'recently_ordered' && reorder == "1") {

    $(".groupcontainer").show();
   } else {
    $(".groupcontainer").hide();
   }
  });
});
</script>

$('#filterText').on('change', function() {
  var currentVal = $(this).val();

  if (currentVal == 'popularity' && topsellers == "true" || currentVal == 'recently_ordered' && reorder == "true") {

    $(".groupcontainer").show();
   } else {
    $(".groupcontainer").hide();
   }
  });
});