Changing background color of div based on pre-selected option in a php generated select menu

Question

I have a php generated select option menu on my page with the options 'Unverifed', 'Verified' and 'Banned'.

I am attempting to (automatically) change the background color of the statusField, based on which option is pre-selected (from database).

Corresponding Status options and background colors should be as follows:

Unverified - orange Verified - green Banned - red

For testing purposes, I am able to achieve the background color change (manually), by using 'Select Option Menu Example #1' (below), along with the 'Change Background Color' script below.

However... I will not be using Example #1 field on my site.

I will be using the php version, 'Example #2', so that I can populate the statusField's pre-selected option with the particular status stored in the database.

Unfortunately... when I attempt to use the same 'Change Background Color' script with Example #2, the color does not automatically change.

Select Option Menu Example #1

<select id="status" name="status" class="statusField" value="<?php echo $_POST['status']; ?>">

<option value="Unverified" class="unverified">Unverified</option>
<option value="Verified" class="verified">Verified</option>
<option value="Banned" class="banned">Banned</option>

</select>

Select Option Menu Example #2

       <?php
            $selected = "$status";
            $options = array('Unverified', 'Verified', 'Banned');
            echo "<select id='status' name='status' class='statusField'>";
            foreach($options as $option){
                if($selected == $option) {
                    echo "<option selected='selected' value='$option'>$option</option>";
                }
                else {
                    echo "<option value='$option'>$option</option>";
                }
            }
            echo "</select>";
        ?>

Change Background Color - Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$(document).ready(function(){
$(document).on("change", ".statusField", function(){
var colors = ["orange", "green", "red"];
var wth = $(this).find(":selected").index();
var color = colors[ wth ];
$(".statusField").css("background-color", color );
});
});    

</script>

Answer 1

The title mentions changing the background color of a div. But in your question, you say you want to change the background color of the statusField. The only reference to statusField in your examples is the <select> element, so I'll assume you want to change the background color of that.

I'm not a JQuery guru, so you'll probably want to change some of my vanilla javascript with JQuery-speak.

Add some css.

<style>
  .Unverified { background-color: orange; }
  .Verified { background-color: green; }
  .Banned { background-color: red }
</style>

convert your $options array into a javascript variable

echo 'const option_classes = ' . json_encode($options);

This will produce:

const option_classes = ['Unverified', 'Verified', 'Banned']

Then immediately set the appropriate css class on your select element. You could do this step in php just as easily.

$('#status').addClass( () => $('#status').val() );

Then add a "change" event listener to your select element.

$('#status').change( (evt) => {});

Inside the event listener callback, find the css class that you need to change. Your select element came with a "statusField" css class. We don't want to touch that, we just want to find any class that is included in option_classes.

const self = evt.target;
const class_to_change = Array.from(self.classList)
    .find( (current) => option_classes.indexOf(current) > -1);

Then replace class_to_change with a class name derived from the value of the newly selected option.

self.classList.replace(class_to_change, self.value);

You probably want to define your php $options variable at the very top of the page. At the very least, it needs to be defined before you start doing the javascript stuff.

<?php $options = ["Verified", "Unverified", "Banned"]?>

Then the contents of your <script> tag will look like this:

<script>
  $(document).ready(function(){

    <?php echo 'const option_classes = ' . json_encode($options); ?>
    
    $('#status').addClass( () => $('#status').val() );
     
    $('#status').change( (evt) => {
        const self = evt.target;
        const class_to_change = Array.from(self.classList)
          .find( (current) => option_classes.indexOf(current) > -1);
        self.classList.replace(class_to_change, self.value);
    });

  });
</script>

Below is a working example:

$(document).ready(function(){

  const option_classes = ["Unverified", "Verified", "Banned"];
  $('#status').addClass( () => $('#status').val() );
 
  $('#status').change( (evt) => {
    const self = evt.target;
    const class_to_change = Array.from(self.classList)
      .find( (current) => option_classes.indexOf(current) > -1);
    self.classList.replace(class_to_change, self.value);
  });

});

.Unverified { background-color: orange; }
.Verified { background-color: green; }
.Banned { background-color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="status" name="status" class="statusField">
  <option class="Unverified">Unverified</option>
  <option selected class="Verified">Verified</option>
  <option class="Banned">Banned</option>
</select>