0

我有一个选择下拉菜单,默认标题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>

在此处输入图像描述

4

2 回答 2

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}

​</p>

jQuery

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

​</p>

于 2012-11-07T02:41:16.623 回答
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 中,两个 class decleration 将不起作用。

示范

于 2012-11-07T02:36:04.123 回答