根据php变量的值使用Java隐藏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.

Answer 2

Since PHP is a backend language you have to expose the variable in javascript context which is at the browser level. To do so what you would end up doing is something like this:

<script type="text/javascript">
var somePHPVariable = "<?php echo $SOMEVAR; ?>";
...
</script>

That now gives you the PHP variable at the javascript level so you can do operations on it just like you would with any other javascript variable. Just keep in mind that PHP renders / computes before javascript does, so your php variables will always be set first. The alternative to this would be to "ask php" via rest / ajax request what the value is and then continue calculation based on the result.