javascript 如何在javascript中访问多个选择数组数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16448587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to access multiple select array data in javascript
提问by Priyanshu
I have a multiple select box and I want to access the selected data in javascript. Here is the code:
我有一个多选框，我想在 javascript 中访问选定的数据。这是代码：
<form onsubmit="return false;" id="multisel">
<select name="a[]" id="a" multiple style="width:350px;" tabindex="4">
<option value="Pedro">1</option>
<option value="Alexis">2</option>
<option value="Messi">3</option>
<option value="Villa">4</option>
<option value="Andres">5</option>
<option value="Sergio">6</option>
<option value="Xavi">7</option>
</select>
<button id="btn1" onclick="ajaxmultiselect()" type="submit" class="btn btn-primary">Save changes</button>
<p id="status"></p>
</form>
Here is the code I have tried so far :
这是我迄今为止尝试过的代码：
<script>
function ajaxmultiselect(){
var input = [];
input = document.getElementById("a").value;
var status = _("status");
if(input == ""){
status.innerHTML = "Fill out all of the form data";
}else {
status.innerHTML = input;
}
}
</script>
When I run the code it only gives the first value. I tried to access the values in php and it works fine, it passes the value as an array in php. Why isn't it doing the same with javascript?
当我运行代码时，它只给出第一个值。我试图访问 php 中的值，它工作正常，它在 php 中将值作为数组传递。为什么它不使用 javascript 做同样的事情？
I also tried to run a loop for the length of the value but that calculates the length of the first selection only. I want to display all the values that will be selected.
我还尝试为值的长度运行一个循环，但这仅计算第一个选择的长度。我想显示将被选择的所有值。
Any help will be appreciated.
任何帮助将不胜感激。
回答by Goodwine
You can do the following:
您可以执行以下操作：
function getSelectedOptions(element) {
// validate element
if(!element || !element.options)
return []; //or null?
// return HTML5 implementation of selectedOptions instead.
if (element.selectedOptions)
return element.selectedOptions;
// you are here because your browser doesn't have the HTML5 selectedOptions
var opts = element.options;
var selectedOptions = [];
for(var i = 0; i < opts.length; i++) {
if(opts[i].selected) {
selectedOptions.push(opts[i]);
}
}
return selectedOptions;
}
and then change your ajaxmultiselect()so you call it like this:
然后改变你的ajaxmultiselect()所以你这样称呼它：
input = getSelectedOptions(document.getElementById("a"));
You will have to iterate for the values tho.
您将不得不迭代这些值。
回答by CSharpConductor
If you are wanting to get multiple selected items you could try something like the following:
如果您想获得多个选定的项目，您可以尝试以下操作：
function GetSelectedItems() {
var select = document.forms[0].a;
var selectedList = [];
for (var i = 0; i < select.options.length; i++) {
if (select.options[i].selected) {
selectedList.push(select.options[i].value);
}
}
alert(Array.join(selectedList, ","));
}
回答by Cory House
document.getElementById('a').options //All Options
This will give you an array of options that you can iterate through.
这将为您提供一系列可以迭代的选项。
回答by Ethan Reesor
For a given <select>element, all of the selected options are in the selectedOptionsproperty. The selectedIndexproperty has the index of the first selected option, or -1if there is no selection. Each of the options are the DOM object for that element, so their value is in the valueproperty. So:
对于给定的<select>元素，所有选定的选项都在selectedOptions属性中。该selectedIndex属性具有第一个选定选项的索引，或者-1如果没有选择。每个选项都是该元素的 DOM 对象，因此它们的值在value属性中。所以：
function ajaxmultiselect(){
var input = [];
var select = document.forms[0].a;
var status = _("status");
var options = select.selectedOptions;
if(select.selectedIndex == -1){
// no selection
status.innerHTML = "Fill out all of the form data";
}else {
for (var i = 0; i < options.length)
input.push(options[i].value);
status.innerHTML = input.join(", ");
}
}
From there you should be able to derive whatever you want.
从那里你应该能够得到你想要的任何东西。
