[英]Changing background color of div based on pre-selected option in a php generated select menu
我的页面上有一个 php 生成的 select 选项菜单,其中包含选项“未验证”、“已验证”和“已禁止”。
我正在尝试(自动)根据预选的选项(从数据库)更改 statusField 的背景颜色。
对应的Status选项和背景colors应该如下:
未验证 - 橙色已验证 - 绿色禁止 - 红色
出于测试目的,我能够通过使用“选择选项菜单示例 #1”(下方)以及下方的“更改背景颜色”脚本来(手动)实现背景颜色更改。
但是...我不会在我的站点上使用示例 #1 字段。
我将使用 php 版本,“示例 #2”,以便我可以使用数据库中存储的特定状态填充 statusField 的预选选项。
不幸的是...当我尝试在示例 #2 中使用相同的“更改背景颜色”脚本时,颜色不会自动更改。
Select 选项菜单示例 #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 选项菜单示例 #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>";
?>
更改背景颜色 - 脚本
<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>
标题提到改变一个div的背景颜色。 但是在你的问题中,你说你想改变 statusField 的背景颜色。 在您的示例中对 statusField 的唯一引用是<select>
元素,因此我假设您想要更改它的背景颜色。
我不是 JQuery 大师,所以您可能想用 JQuery 语言更改我的一些香草 javascript。
添加一些css。
<style>
.Unverified { background-color: orange; }
.Verified { background-color: green; }
.Banned { background-color: red }
</style>
将您的 $options 数组转换为 javascript 变量
echo 'const option_classes = ' . json_encode($options);
这将产生:
const option_classes = ['Unverified', 'Verified', 'Banned']
然后立即在您的 select 元素上设置适当的 css class。 您可以在 php 中轻松执行此步骤。
$('#status').addClass( () => $('#status').val() );
然后将“更改”事件侦听器添加到您的 select 元素。
$('#status').change( (evt) => {});
在事件侦听器回调中,找到您需要更改的 css class。 您的 select 元素带有“statusField”css class。我们不想触及它,我们只想找到包含在option_classes
中的任何 class。
const self = evt.target;
const class_to_change = Array.from(self.classList)
.find( (current) => option_classes.indexOf(current) > -1);
然后将class_to_change
替换为从新选择的选项的值派生的 class 名称。
self.classList.replace(class_to_change, self.value);
您可能想在页面的最顶部定义 php $options 变量。 至少,在开始执行 javascript 之前需要定义它。
<?php $options = ["Verified", "Unverified", "Banned"]?>
然后<script>
标签的内容将如下所示:
<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>
下面是一个工作示例:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.