logo标签列表

所选选项计数器

javascriptjquery
4
我有一系列带有选项“出席”，“缺席”，“开除”和“V.H”的下拉列表。我想为“总计”，“出席”，“缺席”，“开除”和“V.H”设置一个计数器。最初，所有学生都被认为是出席的。如果有100名学生，则初始计数器应如下所示： 总计：100 出席：100 缺席：0 开除：0 V.H：0
如果我将一个下拉列表从“出席”更改为“缺席”，则计数器应如下所示 总计：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>
2个回答
1
在某些浏览器中，由于选择框可以作为本地窗口小部件实现的方式，<option>上的click事件不会触发。无论如何，这样做都不可靠，因为您可能会单击已经选择的abs，并且在所选abs数量未更改时增加abscount。
相反，尝试在任何计算字段更改时从头开始重新计算计算字段。例如：
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>
<!-- ... -->
0
<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接