セレクトボックスで取得した要素を配列にしたい。

###前提・実現したいこと
セレクトメニューで取得した要素のカタマリが
おそらくオブジェクト型になっていて、配列として扱えません。
これを配列として扱うにはどうしたらよいでしょうか？

###発生している問題・エラーメッセージ

※#testがセレクトメニューのidです。

var option = $('#test').children();
alert(option);
alert(option[0]);

このalertをとると、下記のように出力されます。

 [object Object]
[object HTMLOptionElement]

質問①：
alertの結果から、optionは配列ではなく、オブジェクトということでしょうか？
(※オブジェクト型の配列ではなく、オブジェクトでしょうか？)

質問②：
optionを配列にするには、どうしたらよいでしょうか？

目的は、下記のようなコードで配列の差分を取りたい為です。
(optionが配列として機能しない。)

var filter = ["AAA", "BBB", "CCC"];
var remain = $(option).not(filter).get();

ご教授のほどよろしくお願いします。

行動規範の内容に同意します

回答2件

質問①：

たんなる配列ではありません

javascript
1<script>
2$(function(){
3  var option = $('#test').children();
4  console.log(option);
5  option.each(function(){
6    console.log($(this));
7  });
8});
9</script>
10

で確認すればある程度状況がわかるかと思います。

質問②：

optionを配列にするには、どうしたらよいでしょうか？

単なる配列にするには冗長な処理が必要です
仮に

javascript
1  var option = $('#test').get(0).options;

としても、HTMLOptionsCollectionになります。

従って

javascript
1$(function(){
2  var option=[];
3  $('#test').children().each(function(){
4    option.push($(this));
5    //もしくは  option.push($(this).get(0));
6  });
7  console.log(option);
8});
9

としてください

投稿2016/10/24 09:02

yambejp

総合スコア114843

tkshp

2016/10/24 09:26

ご回答ありがとうございます。とても勉強になりました。

行動規範の内容に同意します

ベストアンサー

何がやりたいのかよくわからないのですが、こういうことですかね。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<select id="test">
9			<option value="1">1</option>
10			<option value="2">2</option>
11			<option value="3">3</option>
12			<option value="4">4</option>
13		</select>
14		<div id="result"></div>
15		<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
16		<script type="text/javascript">
17			$(function () {
18				var values = [];
19				var options = $('#test option');
20				$.each(options, function (i, opt) {
21					values[i] = opt.value;
22				});
23
24				// 確認用
25				$("#result").text(values.join(','));
26			});
27		</script>
28	</body>
29</html>