获取多选的价值 - 没有 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();
}());​