Javascript 获取multi-select的值-无jQuery

每个相关的“可能已经有[我的]答案的问题”都使用jQuery，而我没有使用jQuery

那么，有没有简单的方法来获取

标记中所选选项的值，或者我必须循环所有选项以查看哪些选项被选中并手动构建一个数组

附带问题：哪些浏览器不支持

selectElement.value

，而是需要

selectElement.options[selectElement.selectedIndex].value

？

您可以使用。但是，这将返回一个

HTMLCollection

，因此您仍然需要清理它以获得字符串数组

---

如果您最终想要循环并获取所选值，您可以使用以下方法：

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

函数loopSelected（）
{
var txtSelectedValuesObj=“”；
var selectedArray=新数组（）；
var selObj=document.getElementById（'selectID'）；
var i；
var计数=0；
对于（i=0；i您还可以通过
onchange
事件实时跟踪所选选项，并在需要时随时收集它们。我承认它仍在循环，但至少您不是每次需要检索所选选项时都这样做，而且它还具有简单的额外优点（无论如何，检索时间到了…）.工作小提琴：

var检验；
如果（！测试）{
测试={
};
}
（功能（）{
Test.trackSelected=功能（e）{
var selector=document.getElementById（'selector'），
选定=[]，
i=0；
对于（i=0；i
是的，您确实需要从select.selectedIndex循环到length。我认为只有非常旧的浏览器才有.value的问题-我使用第二个作为防御性编码，因为会有浏览器不支持它
selectedOptions
但是不是x浏览器，否？IE（10）对document.createElement中的
警报（“selectedOptions”）说不（“select”）；
和MDN。不过在Chrome中它对我很有用……奇怪为什么你用
.map（）
而不是
.slice（）
@Matt:我猜到了。对于跨浏览器的方式，请查看jQuery源代码并根据您的需要进行简化。@user1689607:无需在此处创建数组的副本，您可以直接使用
.map
。@pimvdb:您正在创建两个新数组。
[].map
创建和数组，然后返回一个不同的数组。与
.slice（）
相同，但代码较少。
var select = document.querySelector("select");
var values = [].map.call(select.selectedOptions, function(option) {
  return option.value;
});

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

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