javascript - 用户使用 select2 更改所选元素的字体颜色

Question

我有简单的选择选项 html:

<select name="individual_taxCountry" id="individual_taxCountry" class="select2">
<option value="" selected="selected" class="selected">Select a country</option>
<option value="Afghanistan" >Afghanistan</option>
<option value="Aland Islands" >Aland Islands</option>
<option value="Albania" >Albania</option>
<option value="Algeria" >Algeria</option>
<option value="Zambia" >Zambia</option>
<option value="Zimbabwe" >Zimbabwe</option>
</select>

我为此使用 select2:

$(document).ready(function(){
$(".select2").select2();
});

而且我还使用此 css 自定义了选择的外观:

.select2-container--default .select2-selection--single
{
    background-color: #21262d;
    border-color: #21262d;
    border-top-color: #21262d;
    border-right-color-value: #21262d;
    border-bottom-color: #21262d;
    border-left-color-value: #21262d;
    height: 34px;
}

它看起来是我想要的方式，但我想在用户这样做时将所选元素的字体颜色更改为白色。我怎样才能做到这一点？

http://jsfiddle.net/bhuffprL/

编辑:因为不是每个人似乎都理解我的目标 - 我只想在用户从列表中选择他/她自己的元素时更改为白色 (fff)。默认选项我想要深色。换句话说:“选择一个国家”应该是深色，当用户从列表中选择一个国家时，我想将字体颜色更改为白色。 p>

Answer 1

我可以想到一些使用 JS 的解决方案，但不确定使用 select2 插件是否有更简单的方法。

我能想到的更简单的方法是创建一个占位符而不是默认选项。

来自:

$(document).ready(function(){
  $(".select2").select2();
});

收件人:

$(document).ready(function(){
  $("#individual_taxCountry").select2({
    placeholder: "Select a state*"
  });
});

然后在您的 html 上，设置一个空的选项值来放置占位符。

替换这个:

<option value="" selected="selected" class="selected">Select a country*</option>

对此:

<option></option> 

然后为字体颜色添加那些必要的css

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #444;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
}

Fiddle