Получить значение multi-select - No jQuery

Question

В каждом соответствующем «вопросе, который может уже иметь [мой] ответ» использует jQuery, который я не использую.

Итак, есть ли какой-либо простой способ получить значения выбранных параметров в теге <select multiple>, или мне нужно просмотреть все параметры, чтобы увидеть, какие из них выбраны и вручную построить массив?

Боковой вопрос: Какие браузеры делать не поддержки selectElement.value и вместо того, чтобы требовать selectElement.options[selectElement.selectedIndex].value?

Answer 1

Вы можете использовать select.selectedOptions. Однако это возвращает HTMLCollection, поэтому вам все равно нужно очистить его, чтобы получить массив строк. http://jsfiddle.net/9gd9v/

<select multiple> 
    <option value="foo" selected>foo</option> 
    <option value="bar">bar</option> 
    <option value="baz" selected>baz</option> 
</select> 

и:

var select = document.querySelector("select"); 
var values = [].map.call(select.selectedOptions, function(option) { 
    return option.value; 
}); 

Answer 2

Если вы в конечном итоге хочет перебрать и захватить выбранные значения, которые вы могли бы использовать что-то вроде этого:

function loopSelected() 
{ 
    var txtSelectedValuesObj = ""; 
    var selectedArray = new Array(); 
    var selObj = document.getElementById('selectID'); 
    var i; 
    var count = 0; 
    for (i=0; i<selObj.options.length; i++) { 
    if (selObj.options[i].selected) { 
     selectedArray[count] = selObj.options[i].value; 
     count++; 
    } 
    } 
    txtSelectedValuesObj = selectedArray; 
    alert(txtSelectedValuesObj); 
} 

Вы можете посмотреть пример HERE, адаптировано из this example.

.

Answer 3

Вы также можете просто отслеживать выбранные параметры с помощью события onchange в режиме реального времени и собирать их, когда захотите. Я признаю, что это все еще цикл, но, по крайней мере, вы не делаете этого каждый раз, когда вам нужно получить выбранные параметры, и у него есть дополнительный бонус быть простым (придет время поиска, во всяком случае ...). Рабочая вилка: http://jsfiddle.net/cyg9Z/

var Test; 
if (!Test) { 
    Test = { 
    }; 
} 
(function() { 
    Test.trackSelected = function (e) { 
     var selector = document.getElementById('selector'), 
      selected = [], 
      i = 0; 
     for (i = 0; i < selector.children.length; i += 1) { 
      if (selector.children[i].selected) { 
       selected.push(selector.children[i].value) 
      } 
     } 
     selector.selMap = selected; 
    }; 
    Test.addListeners = function() { 
     var selector = document.getElementById('selector'), 
      tester = document.getElementById('tester'); 
     selector.onchange = Test.trackSelected; 
     tester.onclick = Test.testSelected; 
    }; 
    Test.testSelected = function() { 
     var div = document.createElement('div'); 
     div.innerText = document.getElementById('selector').selMap.join(', '); 
     document.body.appendChild(div); 
    }; 
    Test.addListeners(); 
}());​