zählen Sie die Anzahl der Auswahlen in einem Mehrfachauswahlfeld

Question

Ich habe eine Mehrfachauswahlliste mit mehr als 5 Optionen, und ich möchte die Anzahl der Auswahl der vom Benutzer ausgewählten Optionen zählen.

Wie es mit Java-Skript zu tun?

ich folgendes versucht, aber es hat nicht funktioniert für mich:

var x = document.getElementById("preference").count; 

Vielen Dank im Voraus.

Answer 1

Angenommen foo ist die ID der Auswahl.

Wenn Sie normale JavaSript verwenden:

var options = document.getElementById('foo').options, count = 0; 
for (var i=0; i < options.length; i++) { 
    if (options[i].selected) count++; 
} 

Wenn Sie jQuery:

var count = $('#foo option:selected').length; 

Answer 2

Verwenden Sie den :selected Selektor, wie folgt aus:

$('#example option:selected').length; 

Answer 3

Sie können versuchen, diese zu erhalten Mehrere Auswahlfelder Benutzer ausgewählte Optionen zählen und ihre ausgewählten Namen. Versuchen Sie den Link http://jsfiddle.net/N6YK8/8/

function getCount(){ 
      var comboBoxes = document.querySelectorAll("select"); 
      var selected = []; 
      for(var i=0,len=comboBoxes.length;i<len;i++){ 
        var combo = comboBoxes[i]; 
        var options = combo.children; 
        for(var j=0,length=options.length;j<length;j++){ 
         var option = options[j]; 
         if(option.selected){ 
          selected.push(option.text); 
         } 
        } 
      } 
      alert("Selected Options '" + selected + "' Total Count "+ selected.length); 
     } 

Answer 4

Wenn < IE8 kein Problem ist, können Sie einen Einzeiler wie document.querySelectorAll("option:checked") tun alle Optionen, um die ausgewählten zu erhalten.

Answer 5

function SelectPage(elem) 
{ 
    alert(elem); 
} 
<select id="page" name="section" onChange="SelectPage(this);" id="num"> 
    <option value="">Select Section</option> 
    <option value="1">Page-1</option> 
    <option value="2">Page-2</option> 
    <option value="3">Page-3</option> 
    <option value="4">Page-4</option> 
    <option value="5">Page-5</option> 
</select>