如何获取多选框的所有选定值？
我有一个具有multiple属性的<select>元素。 我怎样才能得到这个元素的select使用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; }
没有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>
一探究竟：
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; });
点击这里查看演示
ES6
[...select.options].filter(option => option.selected).map(option => option.value)
select是对<select>元素的引用。
打破它：
-
[...select.options]采用类似于数组的选项和结构，以便我们可以使用Array.prototype方法（编辑：也可以考虑使用Array.from()） -
filter(...)将选项减less到仅选中的选项 -
map(...)将原始<option>元素转换为它们各自的值
几乎与已经build议的一样，但有点不同。 关于和Vanilla JS中的 jQuery一样多的代码：
selected = Array.prototype.filter.apply( select.options, [ function(o) { return o.selected; } ] );
它似乎比IE，FF和Safari中的循环更快 。 我觉得有趣的是，在Chrome和Opera中速度较慢。
另一种方法是使用select器：
selected = Array.prototype.map.apply( select.querySelectorAll('option[selected="selected"]'), [function (o) { return o.value; }] );
假设multiSelect是多选元素，只需使用它的selectedOptions属性即可：
//show all selected options in the console: for ( var i = 0; i < multiSelect.selectedOptions.length; i++) { console.log( multiSelect.selectedOptions[i].value); }
你可以试试这个脚本
<!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>
这是一个ES6实现：
value = Array(...el.options).reduce((acc, option) => { if (option.selected === true) { acc.push(option.value); } return acc; }, []);
与之前的答案相同，但使用underscore.js。
function getSelectValues(select) { return _.map(_.filter(select.options, function(opt) { return opt.selected; }), function(opt) { return opt.value || opt.text; }); }
您可以使用[].reduce来更紧凑地实现RobG的方法 ：
var getSelectedValues = function(selectElement) { return [].reduce.call(selectElement.options, function(result, option) { if (option.selected) result.push(option.value); return result; }, []); };
我的模板助手看起来像这样：
'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 }
防暴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>
