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

您可以在此处查看示例，改编自此示例。

.

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