獲取多選的價值 - 沒有 jQuery

Question

每個相關的“可能已經有 [我的] 答案的問題”都使用 jQuery，我沒有使用它。

那么，是否有任何簡單的方法可以獲取<select multiple>標記中所選選項的值，或者我是否必須遍歷所有選項以查看選擇了哪些選項並手動構建數組？

selectElement.value問題：哪些瀏覽器不支持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);  
}

您可以在此處查看示例，該示例改編自此示例。

.

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();
}());​