css 基于php生成的选择菜单中的预选选项更改div的背景色

yxyvkwin 于 2023-02-01 发布在 PHP

关注(0)|答案(1)|浏览(95)

我有一个php生成的选择选项菜单在我的页面上的选项'未经验证'，'已验证'和'禁止'。
我正在尝试（自动）更改statusField的背景色，这取决于（从数据库）预先选择的选项。
相应的状态选项和背景颜色应如下所示：
未验证-橙子已验证-绿色禁止-红色
出于测试目的，我能够通过使用“选择选项菜单示例#1”（如下）沿着下面的“更改背景颜色”脚本（手动）实现背景颜色更改。
然而...我不会在我的网站上使用示例#1字段。
我将使用php版本，'Example #2'，这样我就可以用存储在数据库中的特定状态填充statusField的预选选项。
不幸的是......当我尝试使用与示例#2相同的“更改背景颜色”脚本时，颜色不会自动更改。
选择选项菜单示例#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>

选择选项菜单示例#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>

css

来源：https://stackoverflow.com/questions/75227134/changing-background-color-of-div-based-on-pre-selected-option-in-a-php-generated

1条答案

按热度按时间

qeeaahzv1#

标题提到了改变div的背景色，但在你的问题中，你说你想改变statusField的背景色，你的例子中对statusField的唯一引用是<select>元素，所以我假设你想改变它的背景色。
我不是一个JQueryMaven，所以您可能想用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类，这一步在php中也可以很容易地完成。

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

然后向select元素添加一个"change"事件侦听器。

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

在事件监听器回调中，找到你需要修改的css类。你的select元素带有一个"statusField" css类。我们不想触及它，我们只想找到option_classes中包含的任何类。

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

然后用从新选择的选项的值派生的类名替换class_to_change。

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>

下面是一个工作示例：
一个9个1x一个10个1x一个11个1x

赞(0）回复(0）举报 2023-02-01

我来回答

css 基于php生成的选择菜单中的预选选项更改div的背景色

1条答案

相关问题

热门标签

最新问答