Question

选择选项框，其中包含单词选择和语言名称

如果未选择语言名称，请参阅单词选择。

如果我看到单词选择，则在页面加载时希望看到单词Select in red color。

然而它不是红色的。如果我单击该框并导航到某个语言名称，则单词Select将变为红色。但是如果没有点击框，我需要它为红色（在页面加载时要引起用户注意）。

这是代码

<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。但是如何为单词Select？

定义id

Answer 1

尝试使用jQuery blur()

DEMO

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

参考：jQuery blur

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');
   }
});

应该有效

Jquery如何在select <option>框</option>中更改一个单词的颜色

3 个答案: