Question

我用jQuery编写了一个简单的脚本，但绝对不明白为什么它不能正常工作。

$('#color').change(function () {
  selected = $('#color option[value=' + $(this).val() + ']');
  alert($(selected).css('background-color'));
});

HTML：

<form>
  <select id="color">
    <option value="4" style="background-color:#ff887c;">4</option>
    <option value="6" style="background-color:#ffb878;">6</option>
    <option value="7" style="background-color:#46d6db;">7</option>
  </select>
</form>

jsfiddle上的代码

无论选择哪个选项，我都会得到相同的结果：rgb(51, 153, 255)

UPD ：遗憾的是，这似乎是一个Firefox错误

Answer 1

所以这在Firefox中不起作用（Chrome很好），似乎jQuery与Firefox有一个错误（可能是一个缓存问题）。切换到原生作品！

$(function () {
    $('#color').change(function () {
        selected = $(this).find(':selected');
        alert(selected.get(0).style.backgroundColor);
    });
});

https://jsfiddle.net/pfe2utmq/7/

Answer 2

如果你不介意回到十六进制颜色而不是RGB值，这里有一些代码可以在Chrome和Firefox中使用。基本上我是拉整个样式属性，在末尾修剪分号并手动删除内联样式的“background-color：”部分。不是最理想的我同意，但在紧要关头它会为你带来你想要的价值。

此外，如果您需要在将来选择使用多个内联样式，您可以获得“＃”的索引并在此之后接下来的六个字符以获得完整的十六进制颜色，而不管如何许多其他样式属于相同的样式属性。

$(function () {
    $('#color').change(function () {
        selected = $('#color option[value=' + $(this).val() + ']');
        value = $(selected).attr('style');
        alert(value.substring(0, value.length - 1).replace('background-color:', ''));
    });
});

jQuery：背景值不正确

2 个答案: