选择下拉列表 - 目标默认标题

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}

<强> jquery的

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

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>

在一个空间分隔的同样的变化中，两个级别的变化不起作用。

DEMONSTRATION