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

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

来源

2011-05-03 Tijo K Varghese

你可能会节省了很多时间寻找在谷歌的标题的一半... http://www.google.com/search ？q =获得+所有+所选+值+ + +多个+选择 – neurino 2011-05-03 07:07:41

您有任何代码写入？有了这将很容易帮助:) – Nobita 2011-05-03 07:08:10

function loopSelected（） \t { \t \t var txtSelectedValuesObj = document.getElementById（'txtSelectedValues'）; \t \t var selectedArray = new Array（）; \t \t var selObj = document.getElementById（'slct'）; \t \t var i; \t \t var count = 0; \t \t为（I = 0;我 2011-05-03 07:20:14

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

来源

2011-05-03 08:58:08 RobG

谢谢你的回答。你能帮我介绍一下吗？我想我理解它的大部分内容，但是'var options = select && select.options;'做了什么？在我**的经验不足**中，我预计是'var options = select.options;' – TecBrat 2014-01-22 20:13:22

+11

'select'不是JavaScript中最好的变量名称。 – VisioN 2014-03-05 11:12:28

@TecBrat'var options = select && select.options'确保select在访问其属性之前不是未定义的。 – Qwerty 2015-08-11 11:23:07

入住一下：

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

CLICK HERE TO SEE THE DEMO

来源

2011-05-03 07:16:49 Sukhjeevan

不是粉丝 - “HTML”不是HTML（可读，但不是HTML），答案要求添加JQuery作为依赖项。 – Iiridayn 2017-12-29 23:55:14

差不多一样已经建议，但有点不同。关于在Vanilla JS的代码量的jQuery：

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

它seems to be faster比IE，FF和Safari的循环。我觉得有趣的是，它在Chrome和Opera中速度较慢。

另一种方法是使用选择：

selected = Array.prototype.map.apply(
    select.querySelectorAll('option[selected="selected"]'), 
    [function (o) { return o.value; }] 
);

来源

2013-08-28 16:31:28 uKolka

是不是已经在Javascript中的第一个功能？ – 2016-03-07 16:28:44

嗯......香草JS ......嗯......？什么？？！？！？！ – 2016-03-07 16:32:11

好吧，明白了。但第一个可以更短。只需'select.selectedOptions'。 – 2016-03-07 16:34:42

同前面的答案，但使用underscore.js。

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

来源

2013-10-08 18:39:31

想多选是多选择-元素，只需使用其selectedOptions物业：

//show all selected options in the console: 

for (var i = 0; i < multiSelect.selectedOptions.length; i++) { 
    console.log(multiSelect.selectedOptions[i].value); 
}

来源

2015-12-28 15:07:35 KAFFEECKO

不仅仅是发布代码，而是增加代码工作方式的细节。 – Phiter 2015-12-28 15:12:24

@PhiterFernandes ok ...我认为这很明显 – KAFFEECKO 2015-12-28 15:50:40

请不要把代码片段只用于JS，它没有HTML没有意义，只给出错误 – 2015-12-28 16:01:54

你可以试试这个脚本

 <!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>

来源

2016-04-14 10:44:00

您可以使用[].reduce为RobG's approach的更紧凑实现：

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

来源

2016-08-12 05:47:37 rouan

Array.prototype.filter会是一个更好的选择'[] .filter.call（ele.options，e => e选择）' – megawac 2016-09-06 18:36:44

ES6

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

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

进行分解：

[...select.options]需要的选项类似数组列表和destructures它，这样我们就可以使用数组。它的原型方法（编辑：也可以考虑使用Array.from()）
filter(...)减少选项，只有选择
map(...)原料<option>元素转换成它们各自的值

来源

2016-09-07 07:28:00

功能性很好的执行:) – roadev 2016-11-22 14:27:49

你可以使用reduce（）方法 [My implementation]（https://stackoverflow.com/a/44574936/4725218） – 2017-06-15 19:00:59

如果你可以参考的子项？ – Evgeny 2017-07-30 01:00:51

我的模板助手模样的那些这样的：

'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 
}

来源

2016-11-07 01:38:27

嘿这是什么样的语法（'submit #update'）？ – 2017-04-27 04:56:04

防暴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>

来源

2017-03-08 11:38:29

这里是一个ES6实现：

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

来源

2017-06-15 18:55:28

这很好。有意思的是，因为'element.options'是一个实时集合，它不能被减少。它必须首先被转换为一个数组，如上面的答案所示。 – Brandon 2017-06-15 18:57:39

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

回答

相关问题