jQuery - 比较值和颜色文本

Question

我做了两个下拉列表。当在第一个中选择一个值时，可以在第二个中选择子值。然后它显示一个包含参数和特定值的表格。

我想在参数值大于其他指定值（此处为100）时更改文本颜色。我尝试了.change和parseInt（以基数），但有些错误。任何人都知道如何做到这一点？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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> 
 
     </select> 
 
</div> 
 
<!-- 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> 
 
     </select> 
 
</div> 
 
<br> 
 
<!-- Parameter 1 --> 
 
<div class="container" id="table_param" style="visibility: hidden;"> 
 
    <table class="table table-striped"> 
 
     <thead> 
 
\t  <tr> 
 
       <th>Parametre</th> 
 
\t \t <th>Value</th> 
 
\t \t <th>Measurement unit</th> 
 
\t \t </tr> 
 
     </thead> 
 
\t <tbody> 
 
\t  <tr> 
 
     <td>Param1</td> 
 
\t <td> \t \t \t \t \t 
 
      <div id="param1" style="visibility: hidden;"> \t \t \t \t \t \t 
 
       <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> 
 
      </div> 
 
     </td> 
 
    <td><i><h6>g/100mg</h6></i></td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div> 
 
<!-- Containers --> 
 
<span id="option-container" style="visibility: hidden; position:absolute;"></span> 
 
<span id="option-container_param1" style="visibility: hidden; position:absolute;"></span> 
 
<script> 
 
// 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(); 
 
    $("#option-container_param1").children().appendTo("#param1"); 
 
    var toMove_param1 = $("#param1").children("[data-param!='"+second+"']"); 
 
    toMove_param1.appendTo("#option-container_param1"); 
 
    $("#param1").removeAttr("disabled"); 
 

 
    // Color text according to the value 
 
    $("#param1").change(function(){ 
 
    if(parseFloat($("#param01").val(),10) > 100){ 
 
     return $("#param01").css('color', 'red'); 
 
     } 
 
})  
 

 
    document.getElementById("table_param").style.visibility="visible";   
 
    document.getElementById("param1").style.visibility="visible"; 
 
}; 
 
</script>