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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.