Question

A有一个名为Systems(id, name)的表。我发送了一个查询SELECT * FROM Systems WHERE id = SPECIFIC_ID。然后我有另一个查询SELECT * FROM Systems WHERE id != SPECIFIC_ID。

我在html选择中显示所有内容，如下所示：

<select id="select">
<option value="'.$row1["id"].'">'.$row1["name"].'</option> // this is the result of the first query
while () {
    //the result of the second query
}
</select>

现在我想让第一个选项变成红色。现在我尝试使用我在stackoveflow上找到的jQuery代码：

$(document).ready(function() {
    $('#select').css('color','gray');
    $('#select').change(function() {
       var current = $('#select').val();
       if (current != 'null') {
           $('#select').css('color','black');
       } else {
           $('#select').css('color','gray');
       }
    }); 
});

以上代码的工作原理如下：http://jsfiddle.net/fMQeq/

但要使用它，您需要具有特定值。就我而言，价值不是静态的。我该如何为该选项着色？

Answer 1

选项标签本身不能设置样式。

但是你可以对这个目标采取另一种方法：

只需下拉div包含所有option元素，然后为其设置点击事件，点击后，更改<select>标记值。然后隐藏<select>标记。

Answer 2

你能试试这个例子吗？

    <style>
    .gray{
        background-color:#f00;
        border:2px solid #f00;
        color:#f00;
    }
    .black{
        background-color:#000;
        border:2px solid #000;
    }
    </style>

HTML

    <select id="select">
    <option value="">--Select --</option> // this is the result of the first query
    <option value="1">One</option> // this is the result of the first query
    </select>

SCRIPT

    <script>
    $(document).ready(function() {
        $('#select').attr('color','gray');
        $('#select').change(function() {
           var current = $('#select').val();
           if (current == "") {
               $('#select').attr('class','black');
           } else {
               $('#select').attr('class','gray');
           }
        }); 
    });
    </script>

Answer 3

使用raw css

select:nth-child(1){
    color:red;
}

你不需要把ID放在那里

Answer 4

你可以这样做:) 将css代码直接放在你的html中并非不可能。

<p><a href="http://www.korben.info/42" style="font-size:10px"><font color="red">YEAH</font></a>

Html选择选项更改颜色文本

4 个答案: