我做了兩個下拉列表。當在第一個中選擇一個值時,可以在第二個中選擇子值。然後它顯示一個包含參數和特定值的表格。jQuery - 比較值和顏色文本
我想在參數值大於其他指定值(此處爲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>
''標籤究竟是什麼?你想做什麼?你如何改變價值? –
Dekel
該值顯示在一個表中,具體取決於'div'''和'data-group'。在我做下拉列表來選擇元素之前,每個元素都有帶參數的參數。它看起來像[this](http://cocktaildata.fr/GIS/PY/ex/) – GeoGyro
問題是''不是一個html標記,所以我不太確定你要做什麼。也許你想使用'