jQuery如何在選擇中更改一個單詞的顏色 <option>框

Question

具有帶有單詞選擇和語言名稱的選擇選項框

如果未選擇語言名稱，請參閱單詞Select。

如果我看到“選擇”一詞，則在頁面加載時希望看到紅色的“選擇”一詞。

但是它不是紅色的。 如果我單擊該框並導航到某個語言名稱，則“選擇”字樣將變為紅色。 但是如果沒有單擊框，我需要將其設為紅色（在頁面加載時要引起用戶注意）。

這是示例http://jsfiddle.net/z7264x9t/

這是代碼

<select name="language" id="language">
<option id="red_color">Select</option>
<option value="en">English</option>
<option value="ru">Русский</option>
<option value="lv">Latviešu</option>
</select>

jQuery的

var language_check = $("#language").val();
if ( language_check == 'Select' ) {
$('#red_color').css('color', 'red');
}
else if ( language_check != 'Select' ) {
$('#red_color').css('color', 'green');
}

我想這是因為red_color是<option> id，而不是單詞Select。 但是，如何為“選擇”一詞定義ID？

Answer 1

嘗試使用jQuery blur()

DEMO

  $('#language').on('change',function(){
       $('#language').blur();
      $('#red_color').css('color', 'red');
    });

參考： jQuery模糊

Answer 2

試試這個： http : //jsfiddle.net/z7264x9t/6/

   check();
function check(){
    var language_check = $("#language").val();
if ( language_check == 'Select' ) {
    $("#language").css({'border-color': 'red','color':'red'});
    $('#language option:first-child').css({'color':'red'});
    $('#language>option+option').css({'color':'black'});
}
else if ( language_check != 'Select' ) {
    $("#language").css({'border-color': 'black','color':'green'});
//    $("#language option:first-child").css({'color':'black'});
    $("#language option[value="+language_check+"]").css({'color':'green'});
}
}

$("#language").change(function(){
check();
});

更新時間： http : //jsfiddle.net/z7264x9t/6/

Answer 3

例如：

$('#language option').each(function(){
   if($(this).attr('value') == 'ru'){
      $(this).css('background-color', 'red');
   }
});

應該管用