Javascript selecbox.options для массива?

Ответ 1

Это не массив. Это объект. Это "массив"

с http://api.jquery.com/jQuery.each/, который МОЖЕТ перебирать либо:

Перебирайте как объекты, так и массивы. Массивы и массоподобные объекты со свойством длины (например, объект аргументов функции) итерируются по числовому индексу от 0 до длины-1. Другие объекты повторяются через их именованные свойства.

Каждый элемент HTML Option имеет значение, текст и некоторые другие атрибуты.

Можно использовать простой цикл for

vals = []
var sel = document.querySelector("select");
for (var i=0, n=sel.options.length;i<n;i++) { // looping over the options
  if (sel.options[i].value) vals.push(sel.options[i].value);
}

Array.apply, опубликованный typeracer, вернет массив HTMLOptionElements, которые все еще нужно зациклить или отобразить, чтобы получить значения и тексты.

Вот несколько версий, которые вернут то же самое.

Эта скрипка тоже будет работать в IE11

var vals, sel = document.querySelector("select"), show=function(vals) {$("#result").append("[" + vals.join("][") + "]<hr/>");}
var supportsES6 = function() {try{new Function("(a = 0) => a");return true;}catch (err) {return false;  }}();


// jQuery mapping jQuery objects - note the "this" and the .get()
vals = $('select > option').map(function() {return this.value;}).get();
show(vals);

// plain JS using loop over select options
vals = [];
for (var i = 0, n = sel.options.length; i < n; i++) { // looping over the options
  if (sel.options[i].value) vals.push(sel.options[i].value); // a bit of testing never hurts
}
show(vals);

// Plain JS using map of HTMLOptionElements - note the el
vals = Array.apply(null, sel.options).map(function(el) { return el.value; });
show(vals);

// ES6 JS using spread and map of HTMLOptionElements - note the fat arrow and el
if (supportsES6) 
  document.write('<script>

  vals = [...sel.options].map(el => el.value);

show(vals);
<\/script>'
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select>
<option value="Please select">Text 0</option>
<option value="one">Text 1</option>
<option value="two">Text 2</option>
<option value="three">Text 3</option>
</select><br/> 
The above select has the following option values:<br/>
<span id="result"></span>

Ответ 2

Наиболее кратким решением является следующее:

Array.apply(null, selectbox.options)

Array.apply вызывает конструктор Array с первым аргументом как контекст (т.е. this), а второй аргумент - любой объект, подобный массиву (Ссылка MDN).

Мы передаем null для первого аргумента, потому что мы не пытаемся вызвать метод для определенного объекта, а скорее глобальный конструктор.

Итак, вообще говоря,

Array.apply(null, A)

Создает правильный массив, содержащий элементы любого "массивного" объекта A.

Ответ 3

Чтобы получить все значения в массиве:

var options = document.getElementById('selectId').options;
var values = [];
var i = 0, len = options.length;

while (i < len)
{
  values.push(options[i++].value);
}
alert(values.join(', '));

Скрипка: http://jsfiddle.net/garreh/64pyb/1/

вау долгий путь сделать что-то короткое

Ну, вы можете использовать цикл for, не намного короче, а более уродливо;

for (var options = document.getElementById('selectId').options,
          values, i = 0, len = options.length; i < len;i++)
  values.push(options[i].value);

alert(values.join(', '));

Опять же, это позор, что вы не используете библиотеку, такую как jQuery. Вы могли бы сделать:

$('select > option').map(function() { return this.value; }).get();

Ответ 4

selecbox.options - это коллекция (nodeList). Вы можете перебирать этот элемент так же, как вы, с массивом, нажимать элементы коллекции на реальный массив.

Для записи: во всех браузерах, кроме IE < 9, вы можете использовать [].slice.call(selecbox.options); ¹ чтобы быстро преобразовать коллекцию в массив.

Таким образом, способ конвертирования коллекции nodeList в массив должен быть:

function coll2array(coll){
    var ret = [];
    try {
       ret = [].slice.call(coll)
    }
    catch(e) {
        for (var i =0;i<coll.length;i++){
            ret.push(coll[i]);
        }
    }
    return ret;
}

[ изменить] В настоящее время (ES2015 и выше) мы можем использовать Array.from([arraylike object]).

¹ или Array.prototype.slice.call([some collection])

Ответ 5

select.options не является массивом, это NodeList, который разделяет некоторые функции массива и поэтому может быть описан как массив. NodeList не имеет методов, которые имеет Array, но вы можете call или apply эти методы. В вашем случае вы можете вызвать метод соединения следующим образом:

var opts = yourSelect.options;
var str = Array.prototype.join.call( opts, ',' );

В качестве альтернативы вы можете преобразовать NodeList в истинный массив с аналогичной техникой

// slice returns a new array, which is what we want
var optsArray = Array.prototype.slice.call( opts );

Ответ 6

Вы можете присоединиться к массиву строк, но параметр не является строкой, это объект со всеми видами свойств, такими как значение и текст. Для чего он должен присоединиться?

Вам просто нужно написать цикл, чтобы добавить все нужные значения.

Или используйте библиотеку и используйте некоторую функцию each() для прокрутки опций.