Question

我有一个带有多个选项的下拉菜单。我需要按如下方式为这些选项上色。

如果选项值==“ f1” 或选项值==“ f2”，则下拉颜色=“蓝色”

其他下拉颜色=“红色”

这是代码：

<select id="selector">
    <option value>Default</option>
    <option value="f1">Fruit 1</option>
    <option value="f2">Fruit 2</option>
    <option value="v1">Vege 1</option>
    <option value="v2">Vege 2</option>
</select>

<script>
    $('#selector').on('change', function()
    {
        var selected_v = this.value;

        $(this).find("option").css("color", "blue");
        $(this).css("color", "blue");

        if ((selected_v != "f1") || (selected_v != "f2")) {
            $(this).css("color", "red");
        }
    });
</script>

此方法适用于if ( (selected_v != "f1") )，但在第二个条件后跟||无效。使用 OR 运算符和第二个条件，所有选项将变为红色。怎么了？

实时代码：

http://jsfiddle.net/s7ry1cvp/

Answer 1

问题出在if语句中。您正在比较不等于某个值的变量，或者再次比较不等于另一个值的变量。由于存在OR，它将始终在if块内执行代码。所需的条件是selected_v不等于"f1"并且selected_v不等于"f2"。

尝试使用&&运算符：

if ( (selected_v != "f1") && (selected_v != "f2") ) {
    $(this).css("color", "red");
 }

或者您可以按照说明进行编码：

if ( (selected_v == "f1") || (selected_v == "f2") ) {
   $(this).css("color", "blue");
}
else
{
    $(this).css("color", "red");
}

Answer 2

那总是等同于真实的。想一想。如果值为f2，则不是f1；如果值为v1，则不是f1 ，而是” t f2。

正如我所强调的，您需要使用and运算符（&&）而不是or（||）

如果条件

2 个答案: