我正在制作一个表格来帮助某人进行类观察。该表格具有三个主要目标。
- 它需要全部在客户端,所以我使用 JavaScript。
- 它需要跟踪我已完成的观察到的间隔总数。
- 它还需要计算每个选项被选择的频率(例如,选择 1 的次数,选择 2 的次数等),这就是我陷入困境的地方。我觉得它应该是一个简单的 if 语句,类似于我之前解决第一个问题的代码,但我没有运气。任何帮助,将不胜感激。
如果有区别的话,总共有 144 个间隔。
这是我的表单示例和我正在处理的解决我的需求 #2 的脚本。
我的脚本
$('select[id*="interval"]').change(function() {
total = 0;
$('select[id*="interval"]').each(function() {
total += (+this.value);
});
document.getElementById('result').innerHTML = total;
});
我的表单的一些内容
脚本结果打印的位置
<td><label>Total # Of Observation Intervals:</label></td><td><span id="result">0</span></td>
我希望在哪里汇总选项
<tr>
<td><label>1. Lying Down:</label></td><td><span id="resultA">0</span></td><td>%</td>
<td><label>2. Sitting:</label></td><td><span id="resultB">0</span></td><td>%</td>
</tr>
<tr>
<td><label>3. Standing:</label></td><td><span id="resultC">0</span></td><td>%</td>
<td><label>4. Walking:</label></td><td><span id="resultD">0</span></td><td>%</td>
</tr>
<tr>
<td><label>5. Very Active:</label></td><td><span id="resultE">0</span></td><td>%</td>
</tr>
我的一些下拉菜单
<td><label class=select>Interval 1</label></td><td>Student Activity</td><td><select data-mini=true id="interval1">
<option value=0></option>
<option value=1 id="optA">1</option>
<option value=1 id="optB">2</option>
<option value=1 id="optC">3</option>
<option value=1 id="optD">4</option>
<option value=1 id="optE">5</option>
<option value=1 id="optF">6</option>
</select>
</td>
</td>
</tr>
<tr>
<td><label for=select-choice-4 class=select>Interval 2</label></td><td>Student Activity</td><td><select data-mini=true id="interval2">
<option value=0></option>
<option value=1>1</option>
<option value=1>2</option>
<option value=1>3</option>
<option value=1>4</option>
<option value=1>5</option>
<option value=1>6</option>
</select>
</td>
我尝试过的东西不起作用
$('select[id*="interval"]').options[1].value.change(function() {
totalA = 0;
$('select[id*="interval"]').options[1].value.each(function() {
totalA += (+this.value);
});
document.getElementById('resultA').innerHTML = totalA;
});
最佳答案
首先:total 变量是否在change(function(){}) 范围之外定义?应该是这样。
其次:你的代码所做的是 - 每当每个选择发生变化时,它所做的第一件事就是将总数设置为 0 - 难怪总数是错误的。
第三:确保你理解$().each和$().change的作用,因为整个程序流程似乎有缺陷
此外:您不应该在同一选择中多次重复类似的值
我无法理解您的确切目标是什么,但这里的代码完成了类似的事情:
var totals = { //totals
interval1: {
optionA: 0,
//...
optionZ: 0
},
interval2: {
optionA: 0, //total hits for: <select id="interval2"> <option value="optionA">
optionB: 0,
optionC: 0
}
//etc...
};
$('select[id*="interval"]').each(function(){
$(this).change(function(){ //attach onchange event to each of the selects
var $s = $(this);
if(totals[$s.attr('id')]){
totals[$s.attr('id')][$s.val()] += 1;
//update the span corresponding to the particular select and the particular option value:
$('#result_for_' + $s.attr('id') + '_' + $s.val()).text(totals[$s.attr('id')][$s.val()]);
}
})
});
这是一个基于每个选项的唯一值的解决方案(每个选择,它们可以在选择之间重复)
这个解决方案也不是最佳的 - 你不应该在每次想要更新它时都在 DOM 中搜索 $('#result_for_' + ....) 。您应该记住所有计数器。
祝你好运!
关于javascript - 计算“选择”下拉列表中每个选项被选择的次数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19685055/