CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Rob Kwasowski
Rob Kwasowski

Reputation: 2780

Select text colors

I'm trying to make a dropdown menu that gives you a choice of names of colors and they should appear in that color. So red should be red, blue should be blue, etc. And I want them to stay the same when you're looking at the list, when hovered over, and when they're selected. So far I've got them appearing correctly in the list and when hovered but not when selected.

$(document).ready(function() {	
  $(".pickerSelectClass").selectpicker();	

  $("#select").selectpicker("refresh");
  $('.filter-option').css("color","green");
});
.selectContainer {width:200px}
<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select">
    <option value="1" style="color:red">Red</option>
    <option value="2" style="color:blue">Blue</option>
  </select>
</div>

You can see what I mean here on the JSFiddle. Can anyone help?

Upvotes: 1

Views: 363

Answers (2)

hexYeah
hexYeah

Reputation: 1160

Replace $('.filter-option').css("color","green"); by $('.filter-option').css("color",$('#select').val());

If you don't mind changing the values to match the color this will do:

  $('#select').on('change', function(){
    $('.filter-option').css('color', $(this).val());
  });

As in :

<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select">
    <option value="red" style="color:red">Red</option>
    <option value="blue" style="color:blue">Blue</option>
  </select>
</div>

Upvotes: 2

SKJ
SKJ

Reputation: 2326

You can add data attribute with color and check when change so you can add the color to the selected option or you can just use name of class as font color but data attribute is better i think.

$(document).ready(function() {	
  //$(".pickerSelectClass").selectpicker();	

  //$("#select").selectpicker("refresh");
  $('.filter-option').css("color","green");
  
  $(".pickerSelectClass").on('change', function(){
    var optionSelected = $("option:selected", this), 
    fontColor = $(optionSelected).data('color');
    $(this).css('color', fontColor);
  })
  
  // exemple with class name as font color
  $(".exempleClassName").on('change', function(){
    var optionSelected = $("option:selected", this), 
    fontColor = $(optionSelected).attr('class');
    $(this).css('color', fontColor);
  })
});
.selectContainer { width:200px; }
.pickerSelectClass { color: red; }
.red { color: red; }
.blue { color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectContainer">
  <select class="form-control pickerSelectClass" id="select">
    <option value="1" class="red" data-color="#FF0000">Red</option>
    <option value="2" class="blue" data-color="#0018FF">Blue</option>
  </select>
</div>
<h3>Exemple with using class name</h3>
<div class="selectContainer">
  <select class="form-control pickerSelectClass exempleClassName" id="select">
    <option value="1" class="red">Red</option>
    <option value="2" class="blue">Blue</option>
  </select>
</div>

Upvotes: 2

Related Questions