语法错误，无法识别表达式:select option[value=]

Question

语法错误，无法识别表达式:select option[value=]

在尝试此代码时。我哪里出错了?

var $ = jQuery;
$(document).ready(function() {
$("select option[value=" + $('select option:selected').val() + "]").css({
"background-color": "#0000ff",
"color": "#fff"
});
$('select').change(function() {
$('select option')[0].value = $('select option:selected').val();
$('select option')[0].innerHTML = $('select option:selected').val();
$("select").val($('select option:selected').val());
$("select option").css({
"background-color": "",
"color": ""
});
$("select option[value=" + $('select option:selected').val() + "]").css({
"background-color": "#0000ff",
"color": "#fff"
});
});
});

Answer 1

您可以简单地添加select option:selected。

$(document).ready(function() {
$("select option:selected").css({
"background-color": "#0000ff",
"color": "#fff"
});
$('select').change(function() {
$('select option')[0].value = $('select option:selected').val();
$('select option')[0].innerHTML = $('select option:selected').val();
$("select").val($('select option:selected').val());
$("select option").css({
"background-color": "",
"color": ""
});
$("select option[value=" + $('select option:selected').val() + "]").css({
"background-color": "#0000ff",
"color": "#fff"
});
});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="foo-bar">
<option value="">Select</option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
</select>