问题描述:

I'm wondering if it is possible to get the selected option color to display after the user selects an option?

In this example I'm using the Unicode flag character from the Font-Awesome library.

This code is running in an AngularJS application but is this something that can just as easily be handled with CSS.

<label for="followUp">FollowUp:</label>

<select id="followUp" class="fa fa-flag" style="font-family:'FontAwesome',Arial;">

<option value=""></option>

<option class="fa fa-flag" style="color:blue;" value="1">&#xf024;</option>

<option class="fa fa-flag" style="color:violet;" value="2">&#xf024;</option>

<option class="fa fa-flag" style="color:yellow;" value="3">&#xf024;</option>

<option class="fa fa-flag" style="color:red;" value="4">&#xf024;</option>

</select>

网友答案:

Here is how you can achieve this:

In your controller, you can define a scope variable to store the mapping for the different colors and the values.

$scope.styleOptions = {"1":"blue","2":"violet","3":"yellow","4":"red"};

Change your HTML like this:

<label for="followUp">FollowUp:</label>
<select id="followUp" ng-model="selectedValue"
    ng-class="styleOptions[selectedValue]">
   <option value=""></option>
   <option class="fa  fa-flag blue" value="1">One &#xf024;</option>
   <option class="fa  fa-flag violet" value="2">Two &#xf024;</option>
   <option class="fa  fa-flag yellow" value="3">Three &#xf024;</option>
   <option class="fa  fa-flag red" value="4">Four &#xf024;</option>
</select>

I added One, Two.. in options just to see the color being changed after selection.

Here is the plnkr link

相关阅读:
Top