Question

我有一系列下拉列表，其中包含选项＆＃39;现在＆＃39;，＆＃39;缺席＆＃39;＆＃39;被驱逐＆＃39;和＆＃39; V.H＆＃39;。我想设置一个计数器，用于“总计”，“现状”，“缺席”，“排除”和“排除”＃39;和＆＃39; V.H＆＃39;。最初假定所有学生都在场。如果有100名学生，那么最初的计数器应该是这样的总计：100 现在：100 缺席：0 被驱逐：0 V.H：0

如果我将一个下拉列表从Prsent更改为Absent，那么计数器应该如此总计：100 现在：99 缺席：1 被驱逐：0 V.H：0

等等。

如何使其生效？我认为javascript或jquery可以达到目的。我的部分代码如下所示

<html>
<style type="text/css">
.abs{background-color:yellow}
.exp{background-color:red}
</style>

<?php echo "<select id='dd1{$no}' name='dd1[$no]'  onchange='this.className=this.options[this.selectedIndex].className' ><option  class='pre'>Present</option><option class='abs'>Absent</option><option   class='exp'>Expelled</option><option>V.H.</option></select>";?>

</html>

我已按以下方式尝试过

<html>
<head> <script src="jq/jquery-1.11.1.min.js"></script>
<style>

#cnt{ position: fixed; top: 10; left: 10; background: #fff; }
</style>
<script>
var precount = 100;
var abscount = 0;

$(".abs").on('click', function () {
abscount++;
precount--;

});

$(".pre").on('click', function () {
precount++;
abscount--;

});   
document.getElementById("pre1").value = precount;
document.getElementById("abs1").value = abscount;
</script> 

</head>

<table id="cnt">
<tr><td>Total</td><td><input type="text" size="2" id=""></td></tr>
<tr><td>Present</td><td><input type="text" size="2" id="pre1"></td></tr>
<tr><td>Absent</td><td><input type="text" size="2" id="abs1"></td></tr>
<tr><td>Expelled</td><td><input type="text" size="2" id=""></td></tr>

</table>
</html>

Answer 1

click上的<option>事件并非在所有浏览器中触发，因为选择框可以作为本机窗口小部件实现。

在任何情况下，它都不可靠，因为您可以点击已选中的abs，并在所选abscount的数量增加abs时增加function calculateTotals() { var valueCounts = {pre: 0, abs: 0, exp: 0, vh: 0}; $('.presence').each(function() { var value = $(this).val(); valueCounts[value] += 1; }); $('#pre-count').val(valueCounts.pre); $('#abs-count').val(valueCounts.abs); // ... } $('.presence').on('change', calculateTotals); calculateTotals(); ... <select class="presence"> <option value="pre">Present</option>  </select> <input type="text" id="pre-count" readonly> 没有改变。

相反，每次更改时，都尝试从头开始重新计算计算字段。例如：

img

Answer 2

<script>
var precount = 100;
var abscount = 0;

$(".abs").on('click', function () {
precount=document.getElementById("pre1").value ;
abscount=document.getElementById("abs1").value  ;
abscount=parseInt(abscount)+1;
precount=parseInt(precount)-1;
document.getElementById("pre1").value = precount;
document.getElementById("abs1").value = abscount;
});

$(".pre").on('click', function () {
precount=document.getElementById("pre1").value ;
abscount=document.getElementById("abs1").value  ;
precount=parseInt(precount)+1;
abscount=parseInt(abscount)-1;
document.getElementById("pre1").value = precount;
document.getElementById("abs1").value = abscount;
});   
document.getElementById("pre1").value = precount;
document.getElementById("abs1").value = abscount;
</script>

选定选项的计数器

2 个答案: