jquery - 选择下拉菜单 - 目标默认标题

Question

我有一个选择下拉菜单，默认标题Country为灰色。
但是，仅当您单击该字段时才会显示灰色。
我怎样才能让默认为灰色的可见字段与其他字段匹配？

.form_0{color:#777;}

<select value='country' id='country' name='Country'>
    <option class='country' disabled='disabled' selected='selected' class='form_0'>Country</option>
    <option class='country'>Brazil</option>
    <option class='country'>China</option>
    <option class='country'>India</option>
    <option class='country'>Spain</option>
    <option class='country'>USA</option>
    <option class='country'>Japan</option>
    <option class='country'>Russia</option>
</select>

Answer 1

检查这个jsFiddle

HTML

<select value='country' id='country' name='Country' style='color:#777'>
 <option  disabled='disabled' selected='selected' class='form_0'>Country</option>
   <option class='country'>Brazil</option>
   <option class='country'>China</option>
   <option class='country'>India</option>
   <option class='country'>Spain</option>
   <option class='country'>USA</option>
   <option class='country'>Japan</option>
   <option class='country'>Russia</option>
</select>​ 

css

.form_0{color:#777;}
.country{color:black}

​</p>

jQuery

$('#country').change(function(){
    $(this).css('color','black') ;
 });

​</p>

Answer 2

可能是这样的：

$("#country").on('change', function() {
    $(this).toggleClass("empty", this.value == "0");
}).change();​

您需要为您的选择添加值，并稍作更改：

<select id='country' name='Country'>
    <option value="0" class='country' selected='selected'>Country</option>
    <option value="1" class='country'>Brazil</option>
    <option value="2" class='country'>China</option>
    <option value="3" class='country'>India</option>
    <option value="4" class='country'>Spain</option>
    <option value="5" class='country'>USA</option>
    <option value="6" class='country'>Japan</option>
    <option value="7" class='country'>Russia</option>
</select>​

作为旁注，你不能定义类两次，你定义了两个类，但这样做：

<option class='country form_0'></option>

在由空格分隔的同一个 decleration 中，两个 class decleration 将不起作用。

示范