Fatal编程技术网

Javascript 所选选项的计数器

javascript jquery

Javascript 所选选项的计数器,javascript,jquery,Javascript,Jquery,我有一系列的下拉列表，选项有“出席”、“缺席”、“被开除”和“V.H”。我想为“总计”、“当前”、“缺席”、“开除”和“V.H”设置一个计数器。最初假设所有学生都在场。如果有100名学生，那么最初计数器应该是 总数：100 出席：100 缺席人数：0 开除：0 V.H:0 如果我将一个下拉列表从Prsent更改为缺席，那么计数器应该 总数：100 现在：99 缺席：1 开除：0 V.H:0 等等 如何使其生效？我认为javascript或jquery可以达到这个目的。下面给出了我的部分代码 &l

我有一系列的下拉列表，选项有“出席”、“缺席”、“被开除”和“V.H”。我想为“总计”、“当前”、“缺席”、“开除”和“V.H”设置一个计数器。最初假设所有学生都在场。如果有100名学生，那么最初计数器应该是 总数：100 出席：100 缺席人数：0 开除：0 V.H:0

如果我将一个下拉列表从Prsent更改为缺席，那么计数器应该 总数：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>
由于选择框可以作为本机窗口小部件实现，因此不会在所有浏览器中触发s上的单击事件

在任何情况下，这都是不可靠的，因为您可以单击已选择的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>
<!-- ... -->

<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>