显示a中所选项目的计数

问题描述 投票:0回答:3

尝试了这个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>
javascript select count
3个回答
3
投票

您试图通过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>

1
投票

您可以使用过滤器功能。

const options =  document.getElementById("cars").options;
const count = [...options].filter(option => option.selected).length;

不要忘记将cars id设置为您的选择。


0
投票

您可以使用selectedOptions。

它包含当前所选元素中包含的元素的列表。

它是一个HTMLCollection对象,每个当前选定的选项都有一个条目

var count = document.getElementById("cars").selectedOptions.length;

并使用显示它

document.getElementById("car_count").innerHTML = count ;
© www.soinside.com 2019 - 2024. All rights reserved.