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

Question

Из того, что я понимаю, option элементы, которые заполняют select элементы в HTML, являются массивом.
Поэтому я хочу вернуть строку массива, разделенную запятыми.

Пытался сделать selecbox.options.join(',');, но получил ошибку, что не поддерживается; у кого есть идеи почему?

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

Answer 2

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

Array.apply(null, selectbox.options)

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

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

Итак, в общем

Array.apply(null, A)

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

Answer 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(', '));

Fiddle: 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();

Answer 4

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

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

Таким образом, кросс-браузерный способ преобразования коллекции нодлиста в массив будет выглядеть так:

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

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

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

Answer 5

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

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

Answer 6

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

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

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