显示a中所选项目的计数
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了显示a中所选项目的计数相关的知识，希望对你有一定的参考价值。
尝试了这个q的所有答案，但是无法显示计数（或者可能是要运行的js？）这是我的代码..我想每次选择另一个时更新所选项目的当前计数
任何建议赞赏..每天学习
<html>
<head>
<script type="text/javascript">
function count_cars() {
var options = document.getElementById("cars").options, count = 0 ;
for (var i=0; i < options.length; i++) {
if (options[i].selected) count++;
} // end of for loop
// now put the current count in the element with id='car_count'
document.getElementById("car_count").innerHTML = count ;
} // end of function
</script>
</head>
<body>
<form name="test1" method="GET" action="test2.html">
How many cars have you got?
<table>
<tr><td>
<select multiple name="cars[]" value="" onchange="count_cars">
<option value="ford" >Ford </option>
<option value="saab" >Saab </option>
<option value="merc" >Merc </option>
<option value="audi" >Audi </option>
</select>
</td><td>Total : <div id="car_count"></div></td></tr>
<tr><td><input type="submit"></td></tr>
</table>
</form>
</body>
</html>
答案
您试图通过ID访问选择列表选项 - 但是选择没有ID。此外 - 最好以更易读的方式缩进代码。
function count_cars() {
var options = document.getElementById("cars").options, count = 0 ;
for (var i=0; i < options.length; i++) {
if (options[i].selected) count++;
} // end of for loop
document.getElementById("car_count").innerHTML = count ;
} // end of function<form name="test1" method="GET" action="test2.html">
How many cars have you got?
<table>
<tr>
<td>
<select multiple id="cars" name="cars[]" value="" onchange="count_cars()">
<option value="ford" >Ford </option>
<option value="saab" >Saab </option>
<option value="merc" >Merc </option>
<option value="audi" >Audi </option>
</select>
</td>
<td>
Total : <div id="car_count"></div>
</td>
</tr>
<tr>
<td>
<input type="submit">
</td>
</tr>
</table>
</form>另一答案
您可以使用过滤器功能。
const options = document.getElementById("cars").options;
const count = [...options].filter(option => option.selected).length;
不要忘记将cars id设置为您的选择。
另一答案
您可以使用selectedOptions。
它包含当前所选元素中包含的元素的列表。
它是一个HTMLCollection对象，每个当前选定的选项都有一个条目
var count = document.getElementById("cars").selectedOptions.length;
并使用显示它
document.getElementById("car_count").innerHTML = count ;
以上是关于显示a中所选项目的计数的主要内容，如果未能解决你的问题，请参考以下文章