GeoGyro GeoGyro - 2 months ago 14x
jQuery Question

jQuery - Compare value and color text

I have made two dropdown lists. When a value is selected in the first, sub-values can be selected in the second. Then it display a table with parameters and specific values.

I want to change a text color when parameter's value is greater than an other specified value (here 100 for example). I tried with a

(with radix) but something wrong. Anyone know how to do it ?

<script src=""></script>
<!-- First list -->
<div class="form-group">
<label for="first">First list</label>
<select id="first" class="form-control" role="listbox" onchange="filterList();">
<option value="Select level 1" selected="selected">Select...</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<!-- Second list -->
<div class="form-group">
<label for="second">Second list</label>
<select id="second" class="form-control" role="listbox" onchange="parametres();">
<option value="Select level 2" data-group="Select" selected="selected">Select...</option>
<option value="Option 1 - 1" data-group="Option 1">First list 1 - Element 1</option>
<option value="Option 1 - 2" data-group="Option 1">First list 1 - Element 2</option>
<option value="Option 2 - 1" data-group="Option 2">First list 2 - Element 1</option>
<option value="Option 2 - 2" data-group="Option 2">First list 2 - Element 2</option>
<!-- Parameter 1 -->
<div class="container" id="table_param" style="visibility: hidden;">
<table class="table table-striped">
<th>Measurement unit</th>
<div id="param1" style="visibility: hidden;">
<value data-param="First list 1 - Element 1">130</value>
<value data-param="First list 1 - Element 2">91</value>
<value data-param="First list 2 - Element 1">114</value>
<value data-param="First list 2 - Element 2">63</value>
<!-- Containers -->
<span id="option-container" style="visibility: hidden; position:absolute;"></span>
<span id="option-container_param1" style="visibility: hidden; position:absolute;"></span>
// Filter list
function filterList(){
var first = $("#first").find('option:selected').text(); // stores first list selected elements
$("#option-container").children().appendTo("#second"); // moves <option> contained in #option-container back to their <select>
var toMove = $("#second").children("[data-group!='"+first+"']"); // selects elements to move out
toMove.appendTo("#option-container"); // moves elements in #option-container
$("#second").removeAttr("disabled"); // enables select
// Parameter 1
function parametres(){
var second = $("#second").find('option:selected').text();
var toMove_param1 = $("#param1").children("[data-param!='"+second+"']");

// Text color according to value
if(parseFloat($("#param_sodium").val(),10) > 100){
return $("#param_sodium").css('color', 'red');


There are several issues with the following piece of code:

    if(parseFloat($("#param_sodium").val(),10) > 100){
        return $("#param_sodium").css('color', 'red');

This creates an event handler for the change event of a div element. But:

  • div elements don't natively trigger this event
  • Even if they did, you don't want to respond to a future event; you want to set the color right when you are executing this code.

You'll want instead to iterate over the value tags inside that div.

Then there is an issue with param_sodium: there is no element with that id. It seems instead you need to address the value element.

The content of this value element is not available via val(), but via text().

Finally, you set the color to red, but depending on your full code, you might need to reset the color to black as well.

So here is the code that you could use instead:

$("#param1").children().each(function () { 
    $(this).css( 'color', +$(this).text() > 100 ? 'red' : 'black');

Note that:

  • the unitary + can be use to coerce the text into a number;
  • this is the current value element (child of param1);
  • the ternary operator is used to determine which color to set.