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

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

事情是这样的，也许：

$("#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

，二级declerations将无法正常工作。

DEMONSTRATION

Answer 2

检查这个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} 

jQuery的

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