web-dev-qa-db-ja.com

配列へのJavascript selecbox.options？

私が理解していることから、HTMLでoption要素を生成するselect要素は配列です。
基本的に、私がやりたいことは、コンマで区切られた配列文字列を返すことです。

selecbox.options.join(',');を実行しようとしましたが、サポートされていないというエラーが発生しました。誰もがなぜその理由を持っていますか？

javascripthtmlhtml-select
22
Dementic

配列ではありません。オブジェクトです。 「アレイ状」

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

typeracerによって投稿された Array.apply は、値とテキストを取得するためにループまたはマップする必要がある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>
21
mplungjan

最も簡潔な解決策はこれです：

Array.apply(null, selectbox.options)

Array.applyは、最初の引数をコンテキストとしてArrayコンストラクター（つまり、this）と、配列のようなオブジェクトである2番目の引数（ MDN参照 ）を呼び出します。

最初の引数にnullを渡します。これは、特定のオブジェクトのメソッドを呼び出すのではなく、グローバルコンストラクターを呼び出すためです。

だから一般的に

Array.apply(null, A)

「配列のような」オブジェクトAの要素を含む適切な配列を作成します。

22
typeracer

すべての値を配列に入れるには：

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();
6
Gary Green

_selecbox.options_は（nodeList）コレクションです。配列で行うように、その要素を反復処理できます。コレクションのメンバーを実際の配列にプッシュします。

参考までに、IE <9を除くすべてのブラウザーで[].slice.call(selecbox.options);を使用できます。1 コレクションを配列にすばやく変換します。

したがって、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])を使用できます。

1 またはArray.prototype.slice.call([some collection])

4
KooiInc

select.optionsは配列ではなく、配列の一部の機能を共有する NodeList であるため、配列のように記述できます。 NodeListには、配列にあるメソッドはありませんが、それらに call または apply することができます。あなたのケースでは、次のように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 );
2
meouw

文字列の配列を結合できますが、オプションは文字列ではなく、値やテキストなどのあらゆる種類のプロパティを持つオブジェクトです。参加するにはどちらを使用すればよいですか？

必要なすべての値を追加するループを記述するだけです。

または、ライブラリを使用し、いくつかのeach（）関数を使用してオプションをループします。

1
edwin

スプレッド演算子 を使用すると、本当に簡単になります（_[ ...ElementList ]_）。

それで、あなたのケースのために、あなたは以下をすることができます：
arr = document.getElementById('store-locator-region')

次に、spread演算子を使用して、html選択要素をオブジェクト配列に変換します。
_newArr = [...arr]_

次に、オブジェクト配列を反復処理して、最終的な配列を取得します。
countryList = newArr.map(a => a.value) _(97) ["XE", "AL", "DZ", "AD", "AR", "AM", etc..]_

0
Heshie Brody