Подсчитайте количество выборок в поле множественного выбора

У меня есть несколько списков выбора, которые содержат более 5 параметров, и я хочу подсчитать количество вариантов, выбранных пользователем.

Как это сделать, используя java script?

Я попробовал следующее, но это не сработало для меня:

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

Спасибо в Advance.

Ответы

Ответ 1

Предположим, что foo - это идентификатор выбора.

Если вы используете обычный javasript:

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

Если вы используете jQuery:

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

Ответ 2

Вы можете попробовать это, чтобы получить несколько выбранных пользователем значений выбранных опций пользователей и их выбранных имен. Попробуйте эту ссылку 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);
         }

Ответ 3

Используйте селектор :selected, например:

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

Ответ 4

Если < IE8 не вызывает беспокойства, вы можете сделать один лайнер, например document.querySelectorAll("option:checked"), чтобы получить все выбранные параметры.

Ответ 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>