用户使用select2更改所选项目的字体颜色 [英] Changing font color of selected item by user with select2

问题描述

我简单地选择了html:

I've simple select option 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:

I am using select2 for this:

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

我还使用此CSS自定义了select的外观:

And I also customized the way the select looks with this 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;
}

它看起来像我想要的样子，但是当用户这样做时，我想将所选项目的字体的颜色更改为白色.我该怎么办?

It looks the way I want but I would like to change the color to white for the font of the selected item when user does that. How can I accomplish that?

http://jsfiddle.net/bhuffprL/

因为并非所有人似乎都了解我的目标-仅当用户从列表中选择自己的项目时，我才想更改为白色(fff)颜色. 默认设置为我想变暗".换句话说:选择国家/地区"应为深色，并且当用户从列表中选择一个国家时，我想将字体颜色更改为白色. >

Because not everyone seems to understand my goal - I want to change to white (fff) color ONLY WHEN user selects his/her own item from the list. The default option I want to be dark. In other words: 'Select a country' should be dark color as it is and when user selects a country from the list then I want to change font color to white.

推荐答案

我不确定使用JS的某些解决方案，尽管不确定是否有使用select2插件的简便方法.

I can think some of the solutions using JS though not sure if there's an easier way for that using the select2 plugin.

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

Easier way I can think of is to create a placeholder instead of having a default option.

发件人:

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

收件人:

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

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

Then on your html, set an empty option value where the placeholder will take place.

替换此:

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

为此:

<option></option> 

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

Then add those necessary css for the font color

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

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

小提琴

这篇关于用户使用select2更改所选项目的字体颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！