如何获取多选框的所有选定值？

IT技术 javascript html drop-down-menu
2021-01-31 22:53:37

我有一个<select>具有该multiple属性的元素。如何使用 JavaScript 获取此元素的选定值？

这是我正在尝试的：

function loopSelected() { 
    var txtSelectedValuesObj = document.getElementById('txtSelectedValues');
    var selectedArray = new Array();
    var selObj = document.getElementById('slct'); 
    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.value = selectedArray;
}
6个回答

没有jQuery：

// Return an array of the selected opion values
// select is an HTML select element
function getSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}

快速示例：

<select multiple>
  <option>opt 1 text
  <option value="opt 2 value">opt 2 text
</select>
<button onclick="
  var el = document.getElementsByTagName('select')[0];
  alert(getSelectValues(el));
">Show selected values</button>
我认为带有 && 的行没有多大意义...... if selectis not definedgetElementById将返回null。在这种情况下，options一旦您尝试访问 length 属性，它将为 null 和错误。但也许我错过了什么？
2021-03-13 22:53:37
@TecBratvar options = select && select.options在访问其属性之前确保 select 不是未定义的。
2021-03-21 22:53:37
谢谢你的回答。你能帮我完成它吗？我想我明白其中的大部分内容，但是有什么作用var options = select && select.options;呢？在我缺乏经验的情况下，我希望那是var options = select.options;
2021-03-28 22:53:37
select 不是 JavaScript 中最好的变量名。
2021-03-30 22:53:37

ES6

[...select.options].filter(option => option.selected).map(option => option.value)

哪里select是对<select>元素的引用。

分解：

  • [...select.options]获取类似 Array 的选项列表并对其进行解构，以便我们可以在其上使用 Array.prototype 方法（编辑：也考虑使用Array.from()）
  • filter(...) 将选项减少到仅选定的选项
  • map(...)将原始<option>元素转换为它们各自的值
@Evgeny 有很多解决方法。您应该在新答案中发布您的方法。
2021-03-11 22:53:37
你可以只使用 reduce() 方法我的实现
2021-03-13 22:53:37
不错的功能实现:)
2021-03-19 22:53:37
如果您可以获得对 <select> 的引用，为什么不跳过 filter() 步骤并使用 querySelectorAll 仅获取对 <select> 的 :checked 子代的引用？
2021-03-19 22:53:37
@Anentropic 这是一个很好的问题，但我认为效率并不重要，除非我们谈论成百上千的选项。
2021-03-20 22:53:37

看看这个：

HTML：

<a id="aSelect" href="#">Select</a>
<br />
<asp:ListBox ID="lstSelect" runat="server"  SelectionMode="Multiple" Width="100px">
    <asp:ListItem Text="Raj" Value="1"></asp:ListItem>
    <asp:ListItem Text="Karan" Value="2"></asp:ListItem>
    <asp:ListItem Text="Riya" Value="3"></asp:ListItem>
    <asp:ListItem Text="Aman" Value="4"></asp:ListItem>
    <asp:ListItem Text="Tom" Value="5"></asp:ListItem>
</asp:ListBox>

查询：

$("#aSelect").click(function(){
    var selectedValues = [];    
    $("#lstSelect :selected").each(function(){
        selectedValues.push($(this).val()); 
    });
    alert(selectedValues);
    return false;
});

单击此处查看演示

不是粉丝 - “HTML”不是 HTML（可读，但不是 HTML），答案需要添加 JQuery 作为依赖项。
2021-04-05 22:53:37

假设 multiSelect 是 Multiple-Select-Element，只需使用它的 selectedOptions 属性：

//show all selected options in the console:

for ( var i = 0; i < multiSelect.selectedOptions.length; i++) {
  console.log( multiSelect.selectedOptions[i].value);
}
@ShadowWizard 明白了
2021-03-11 22:53:37
请注意，selectedOptions在 IE 中不支持。developer.mozilla.org/en-US/docs/Web/API/...
2021-03-23 22:53:37
不要仅仅发布代码，而是增加有关代码工作方式的详细信息。
2021-03-25 22:53:37
请不要只为 JS 放置代码片段，没有 HTML 是毫无意义的，只会给出错误
2021-03-28 22:53:37

与已经建议的几乎相同，但有点不同。与Vanilla JS 中的jQuery 代码一样多：

selected = Array.prototype.filter.apply(
  select.options, [
    function(o) {
      return o.selected;
    }
  ]
);

它似乎比 IE、FF 和 Safari 中的循环更快。我觉得有趣的是它在 Chrome 和 Opera 中更慢。

另一种方法是使用选择器：

selected = Array.prototype.map.apply(
    select.querySelectorAll('option[selected="selected"]'),
    [function (o) { return o.value; }]
);
好的，我知道了。但第一个可以更短。只是select.selectedOptions。
2021-03-22 22:53:37
与使用库相比，这是裸 JS 的一个缺点。selectedOptions 属性缺乏可靠的浏览器支持。像 jQuery 这样的库会将它隐藏起来。自 2013 年以来发生了很多变化，但快速谷歌显示人们仍然对 selectedOptions 有问题。
2021-04-01 22:53:37
第一个的功能不是已经在 J​​avascript 中了吗？
2021-04-08 22:53:37
其它你可能感兴趣的问题
上一篇如何使用javascript从文本框控件中获取选定的文本 下一篇在 javascript 中递归构建Promise链 - 内存注意事项