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

77

我有一个<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;
}

javascript html drop-down-menu

— 蒂乔·瓦格斯（Tijo K Varghese）
source

你可以在谷歌...保存了大量的时间搜索，为您的标题的一半google.com/...

— neurino

你有写代码吗？有了它，将很容易帮助:)

— 大雄

109

没有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>

— 罗布
source

1

感谢您的回答。你能帮我一步步吗？我想我了解的最多，但是怎么var options = select && select.options;办？根据我的经验，我希望是var options = select.options;

— TecBrat 2014年

12

select不是JavaScript中最好的变量名。

— VisioN 2014年

4

@TecBratvar options = select && select.options确保在访问select属性之前，它不是未定义的。

— 2015年

我认为&&的行没有多大意义...如果select未定义，getElementById将返回null。在这种情况下，options一旦您尝试访问length属性，它将为null和错误。但是也许我想念什么？

— Xen_mar

33

ES6

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

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

分解：

[...select.options]接受类似数组的选项列表并对其进行解构，以便我们可以在其上使用Array.prototype方法（编辑：还考虑使用Array.from()）
filter(...) 将选项减少为仅选择的选项
map(...)将原始<option>元素转换为各自的值

— 里克·维斯科米（Rick Viscomi）
source

4

好的功能实现:)

— roadev

您可以只使用reduce（）方法我的实现

— To_wave

如果可以引用<select>，为什么不跳过filter（）步骤，而直接使用querySelectorAll引用<select>的：checked子元素？

— Evgeny

1

@Evgeny有很多解决方法。您应该在新答案中发布您的方法。

— 里克·维斯科姆

1

@Anentropic是一个很好的问题，但是除非我们谈论的是成百上千的选择，否则我认为效率并不重要。

— Rick Viscomi '18

28

看看这个：

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>

JQUERY：

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

单击此处查看演示

— 苏赫杰万
source

1

不是狂热者-“ HTML”不是HTML（可读性，但不是HTML），答案是需要添加JQuery作为依赖项。

— Iiridayn

10

与已经建议的几乎相同，但有所不同。与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; }]
);

— uKolka
source

Javascript中是否已经没有第一个功能？

— 阿伦·贝勒

1

好的，我知道了。但是第一个可以更短。只是select.selectedOptions。

— Arlen Beiler

1

与使用库相比，这是裸JS的缺点。selectedOptions属性缺少可靠的浏览器支持。像jQuery这样的库将对您隐藏。自2013年以来发生了很多变化，但是快速谷歌显示人们仍然对selectedOptions有疑问。

— uKolka'3

10

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

— 卡夫菲科
source

不仅要发布代码，还应增加有关代码工作方式的详细信息。

— Phiter 2015年

请不要把片段只是JS，这是毫无意义，而不HTML，只给出错误

— 暗影精灵是接种疫苗

@ShadowWizard收到了它

— KAFFEECKO 2015年

请注意，selectedOptionsIE不支持该功能。developer.mozilla.org/en-US/docs/Web/API/...

— 2540625

4

这是一个ES6实现：

value = Array(...el.options).reduce((acc, option) => {
  if (option.selected === true) {
    acc.push(option.value);
  }
  return acc;
}, []);

— To_wave
source

这很好。有趣的是，由于element.options是实时收集，因此无法减少。如上面的答案所示，必须首先将其转换为数组。

— 布兰登

3

检查一下：

HTML：

<select id="test" multiple>
<option value="red" selected>Red</option>
<option value="rock" selected>Rock</option>
<option value="sun">Sun</option>
</select>

JavaScript一行代码

Array.from(document.getElementById("test").options).filter(option => option.selected).map(option => option.value);

— 克里什·K
source

2

你可以试试这个脚本

     <!DOCTYPE html>
    <html>
    <script>
    function getMultipleSelectedValue()
    {
      var x=document.getElementById("alpha");
      for (var i = 0; i < x.options.length; i++) {
         if(x.options[i].selected ==true){
              alert(x.options[i].value);
          }
      }
    }
    </script>
    </head>
    <body>
    <select multiple="multiple" id="alpha">
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
      <option value="d">D</option>
    </select>
    <input type="button" value="Submit" onclick="getMultipleSelectedValue()"/>
    </body>
    </html>

— 潘卡·乔汉（Pankaj Chauhan）
source

2

您可以使用RobG方法[].reduce的更紧凑的实现：

var getSelectedValues =  function(selectElement) {
  return [].reduce.call(selectElement.options, function(result, option) {
    if (option.selected) result.push(option.value);
    return result;
  }, []);
};

— uan
source

Array.prototype.filter是一个更好的选择[].filter.call(ele.options, e => e.selected)

— megawac

2

以Rick Viscomi的答案为基础，尝试使用HTML Select元素的selectedOptions属性：

let txtSelectedValuesObj = document.getElementById('txtSelectedValues');
[...txtSelectedValuesObj.selectedOptions].map(option => option.value);

详细地，

selectedOptions 返回所选项目的列表。
具体而言，它返回一个只读的HTMLCollection含有HTMLOptionElements。
...是扩展语法。它扩展了HTMLCollection的元素。
[...]Array从这些元素创建一个可变对象，为您提供的数组HTMLOptionElements。
map()用值（）替换HTMLObjectElement数组（此处称为option）中的每个值option.value。

密集，但似乎可行。

注意，IEselectedOptions 不支持！

— 凯文·马修斯
source

1

与先前的答案相同，但是使用了underscore.js。

function getSelectValues(select) {
    return _.map(_.filter(select.options, function(opt) { 
        return opt.selected; }), function(opt) { 
            return opt.value || opt.text; });
}

— FP自由
source

1

我的模板助手看起来像这样：

 'submit #update': function(event) {
    event.preventDefault();
    var obj_opts = event.target.tags.selectedOptions; //returns HTMLCollection
    var array_opts = Object.values(obj_opts);  //convert to array
    var stray = array_opts.map((o)=> o.text ); //to filter your bits: text, value or selected
    //do stuff
}

— 史蒂夫·泰勒
source

1

你去。

const arr = Array.from(el.features.selectedOptions) //get array from selectedOptions property
const list = [] 
arr.forEach(item => list.push(item.value)) //push each item to empty array
console.log(list)

— 动力发展
source

0

防暴js代码

this.GetOpt=()=>{

let opt=this.refs.ni;

this.logger.debug("Options length "+opt.options.length);

for(let i=0;i<=opt.options.length;i++)
{
  if(opt.options[i].selected==true)
    this.logger.debug(opt.options[i].value);
}
};

//**ni** is a name of HTML select option element as follows
//**HTML code**
<select multiple ref="ni">
  <option value="">---Select---</option>
  <option value="Option1 ">Gaming</option>
  <option value="Option2">Photoshoot</option>
</select>

— Nilesh Pawar
source

0

您可以使用选定的jquery插件。

<head>
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css"
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
 <script>
        jQuery(document).ready(function(){
            jQuery(".chosen").data("placeholder","Select Frameworks...").chosen();
        });
 </script>
</head>

 <body> 
   <label for="Test" class="col-md-3 control label">Test</label>
      <select class="chosen" style="width:350px" multiple="true">
            <option>Choose...</option>
            <option>Java</option>                           
            <option>C++</option>
            <option>Python</option>
     </select>
 </body>

— 皮疹
source