顯示一個中的選定項目數<select multiple>
[英]Display count of Selected items in a <select multiple>
問題描述
嘗試了關於此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>
3 個解決方案
解決方案1
3 2018-03-04 21:33:47
您試圖通過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>
解決方案2
1 2018-03-04 21:37:48
您可以使用過濾器功能。
const options = document.getElementById("cars").options;
const count = [...options].filter(option => option.selected).length;
不要忘記為您選擇的cars設置ID。
解決方案3
0 2018-03-04 23:40:28
您可以使用selectedOptions。
它包含當前所選元素中包含的元素的列表。
這是一個HTMLCollection對象，每個當前選定的選項只有一個條目
var count = document.getElementById("cars").selectedOptions.length;
並使用顯示
document.getElementById("car_count").innerHTML = count ;
如何獲取Kendo Multi Select Control中所選項目的數量？
[英]How to get the count of selected items in Kendo Multi Select Control?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.