如何获取多选框的所有选定值?
Posted
技术标签:
【中文标题】如何获取多选框的所有选定值?【英文标题】:How to get all selected values of a multiple select box? 【发布时间】:2011-08-17 11:51:10 【问题描述】:我有一个带有multiple
属性的<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;
【问题讨论】:
你写过代码吗?有了这将很容易帮助:) 【参考方案1】:签出:
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
【讨论】:
不是粉丝——“html”不是 HTML(可读,但不是 HTML),答案需要添加 JQuery 作为依赖项。【参考方案2】:没有 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>
【讨论】:
感谢您的回答。你能帮我看看吗?我想我大部分都了解,但var options = select && select.options;
是做什么的?根据我的经验,我预计会是var options = select.options;
select
不是 JavaScript 中最好的变量名。
@TecBrat var options = select && select.options
在访问其属性之前确保 select 不是未定义的。
我认为带有 && 的行没有多大意义......如果 select
未定义 getElementById
将返回 null
。在这种情况下,一旦您尝试访问 length 属性,options
将是 null 和错误。但也许我错过了什么?【参考方案3】:
与已经建议的几乎相同,但有点不同。 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; ]
);
【讨论】:
第一个功能不是已经在Javascript中了吗? 好的,知道了。但第一个可以更短。只需select.selectedOptions
。
与使用库相比,这是裸 JS 的一个缺点。 reliable browser support 中缺少 selectedOptions 属性。像 jQuery 这样的库会对你隐藏它。自 2013 年以来发生了很多变化,但快速的谷歌显示人们仍然对 selectedOptions 有问题。【参考方案4】:
与之前的答案相同,但使用 underscore.js。
function getSelectValues(select)
return _.map(_.filter(select.options, function(opt)
return opt.selected; ), function(opt)
return opt.value || opt.text; );
【讨论】:
【参考方案5】:假设 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);
【讨论】:
不只是发布代码,而是增加有关代码工作方式的详细信息。 请不要把sn-p只给JS,没有HTML就没意义,只会报错 @ShadowWizard 知道了 请注意,IE 不支持selectedOptions
。 developer.mozilla.org/en-US/docs/Web/API/…【参考方案6】:
你可以试试这个脚本
<!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>
【讨论】:
【参考方案7】:您可以使用[].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;
, []);
;
【讨论】:
Array.prototype.filter 会是更好的选择[].filter.call(ele.options, e => e.selected)
【参考方案8】:
ES6
[...select.options].filter(option => option.selected).map(option => option.value)
其中select
是对<select>
元素的引用。
分解:
[...select.options]
采用类似 Array 的选项列表并对其进行解构,以便我们可以在其上使用 Array.prototype 方法(编辑:也可以考虑使用 Array.from()
)
filter(...)
将选项减少到仅选择的选项
map(...)
将原始 <option>
元素转换为它们各自的值
【讨论】:
不错的功能实现:) 你可以只使用 reduce() 方法My implementation 如果你能得到 @Evgeny 有很多方法可以解决它。您应该在新答案中发布您的方法。 @Anentropic 这是一个很好的问题,但我认为效率并不重要,除非我们谈论成百上千个选项。【参考方案9】:我的模板助手看起来像这样:
'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
【讨论】:
【参考方案10】:防暴 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>
【讨论】:
【参考方案11】:这是一个 ES6 实现:
value = Array(...el.options).reduce((acc, option) =>
if (option.selected === true)
acc.push(option.value);
return acc;
, []);
【讨论】:
这很好用。有趣的是,由于element.options
是实时集合,因此无法减少。如上述答案所示,它必须首先转换为数组。【参考方案12】:
您可以使用选择的 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>
【讨论】:
【参考方案13】:基于Rick Viscomi 的回答,尝试使用HTML Select Element 的selectedOptions 属性:
let txtSelectedValuesObj = document.getElementById('txtSelectedValues');
[...txtSelectedValuesObj.selectedOptions].map(option => option.value);
详细一点,
selectedOptions
返回所选项目的列表。
具体来说,它返回一个包含HTMLOptionElements的只读HTMLCollection。
...
是 spread syntax。它扩展了HTMLCollection
的元素。
[...]
从这些元素创建一个可变的 Array
对象,为您提供一个 HTMLOptionElements
数组。
map()
用其value (option.value
) 替换数组中的每个HTMLObjectElement
(此处称为option
)。
密集,但它似乎有效。
当心,selectedOptions
isn't supported IE!
【讨论】:
【参考方案14】:检查一下:
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);
【讨论】:
【参考方案15】:来吧。
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)
【讨论】:
【参考方案16】:您可以像这样创建自己的函数并在任何地方使用它
Pure JS
/**
* Get values from multiple select input field
* @param string selectId - the HTML select id of the select field
**/
function getMultiSelectValues(selectId)
// get the options of select field which will be HTMLCollection
// remember HtmlCollection and not an array. You can always enhance the code by
// verifying if the provided select is valid or not
var options = document.getElementById(selectId).options;
var values = [];
// since options are HtmlCollection, we convert it into array to use map function on it
Array.from(options).map(function(option)
option.selected ? values.push(option.value) : null
)
return values;
你可以在一行中使用 jQuery 获得相同的结果
$('#select_field_id').val()
这将返回well的值数组。
【讨论】:
【参考方案17】:来自HTMLSelectElement.selectedOptions - Web APIs | MDN的示例
let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");
orderButton.addEventListener("click", function()
let collection = itemList.selectedOptions;
let output = "";
for (let i = 0; i < collection.length; i++)
if (output === "")
output = "Your order for the following items has been placed: ";
output += collection[i].label;
if (i === (collection.length - 2) && (collection.length < 3))
output += " and ";
else if (i < (collection.length - 2))
output += ", ";
else if (i === (collection.length - 2))
output += ", and ";
if (output === "")
output = "You didn't order anything!";
outputBox.innerHTML = output;
, false);
<label for="foods">What do you want to eat?</label><br>
<select id="foods" name="foods" size="7" multiple>
<option value="1">Burrito</option>
<option value="2">Cheeseburger</option>
<option value="3">Double Bacon Burger Supreme</option>
<option value="4">Pepperoni Pizza</option>
<option value="5">Taco</option>
</select>
<br>
<button name="order" id="order">
Order Now
</button>
<p id="output">
</p>
【讨论】:
以上是关于如何获取多选框的所有选定值?的主要内容,如果未能解决你的问题,请参考以下文章