使用基于php变量值的Javascript隐藏div

Question

I currently have a select box in my laravel blade:

<div style="text-align:center;">
   <div>
    <span style="color:#fff;"><strong>Sort by:</strong></span>
    <select id="filterText" class="uk-text-muted" style="margin-top:10px; width:33%; height:30px; font-size: 16px;" onchange="filterText()" >
      <option id="allitems" class="uk-text-muted" style="font-size: 16px;" selected data-default value="" selected data-default>All Items</option>
      <option id="popular" class="uk-text-muted" style="font-size: 16px;" value="" >Popularity</option>
      <option id="recent" class="uk-text-muted" style="font-size: 16px;" value="">Recently Ordered </option>
     </select>
   </div>

And I want to use JS to show/hide my .groupcontainer div based on the value of a PHP variable. I have a function that creates PHP variables $topsellers and $reorder. So I want to map my option popularity to $topsellers and the option Recently Ordered to $reorder

I have some JS that I was playing with but I don't know how to do this properly, however, it gives an idea:

<script type="text/javascript">
$('#filterText').on('change', function () {
if (this.value == '') {
  $(".groupcontainer").show();
} else {
  $(".groupcontainer").hide();
}
});
</script>

But basically, I want to say :

if value popularity is selected and $topsellers == true, show the groupcontainer div, and if value recently ordered is selected and $reorder is true, only show those groupcontainer divs.

I hope that makes sense. I feel like the pieces are there but I need help connecting them with logic and syntax.

UPDATE (new attempted solution):

JS:

<script type="text/javascript">

$('#filterText').on('change', function () {

var topsellers = "<?php echo $pgroups->topseller; ?>";
var reorder    = "<?php echo $pgroups->reorder; ?>";

 var currentVal = $(this).val();

 if (currentVal == 'popularity' && topsellers == "true" || currentVal == 'recently_ordered' && reorder == "true") {
   $(".groupcontainer").show();
 } else {
   $(".groupcontainer").hide();
 }
});
</script>

HTML/Select box:

    <div style="text-align:center;">
                                <div>
                                    <span style="color:#fff;"><strong>Sort by:</strong></span>
                                    <select id="filterText" class="uk-text-muted" style="margin-top:10px; width:33%; height:30px; font-size: 16px;" onchange="filterText()" >
                                        <option id="allitems" class="uk-text-muted" style="font-size: 16px;" selected data-default value="" selected data-default>All Items</option>
                                      <option id="popular" class="uk-text-muted" style="font-size: 16px;" value="popularity" >Popularity</option>
                                      <option id="recent" class="uk-text-muted" style="font-size: 16px;" value="recently_ordered">Recently Ordered </option>
                                    </select>
                                </div>
                            </div>

Answer 1

You could add hidden inputs for those values like :

<input class="topsellers" value="{{$topsellers}}" />
<input class="reorder" value="{{$reorder}}" />

Or you could put the variables to the Js variables like :

var topsellers = "<?php echo $topsellers; ?>";
var reorder    = "<?php echo $reorder; ?>";

Then use those value in the condition in your JS code, something like :

$(function(){
    var topsellers = "<?php echo $topsellers; ?>";
    var reorder    = "<?php echo $reorder; ?>";

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

      if (currentVal == 'popularity' && topsellers == "1" || currentVal == 'recently_ordered' && reorder == "1") {
        $(".groupcontainer").show();
      } else {
        $(".groupcontainer").hide();
      }
    });
});

Hope this helps.