質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1185閲覧

リストボックスの値を取得する際のoptionsプロパティについて

newyee

総合スコア213

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/09/17 09:12

編集2018/09/17 09:12

複数選択できるリストボックスの値を取得する際に、「options」プロパティを使用した場合と使用しない場合とでは、何か違いなどはあるのでしょうか?

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8" /> 5<title>JavaScript本格入門</title> 6</head> 7<body> 8<form> 9 <div> 10 <label for="food">好きな食べ物は?:</label> 11 <select id="food" multiple> 12 <option value="ラーメン">ラーメン</option> 13 <option value="餃子">餃子</option> 14 <option value="焼き肉">焼き肉</option> 15 </select> 16 <input id="btn" type="button" value="送信" /> 17 </div> 18</form> 19<script src="list.js"></script> 20</body> 21</html>

javascript

1document.addEventListener('DOMContentLoaded', function() { 2 var getSelectValue = function(name) { 3 var result = []; 4 var opts = document.getElementById(name).options; 5 console.log(opts); 6 for(var i = 0, len = opts.length; i < len; i++) { 7 var opt = opts.item(i); 8 if (opt.selected) { 9 result.push(opt.value); 10 } 11 } 12 return result; 13 }; 14 15 document.getElementById('btn').addEventListener('click', function() { 16 window.alert(getSelectValue('food')); 17 }, false); 18}, false);

上記コードの「 var opts = document.getElementById(name).options;」の部分で、.optionsとしているのですが、これを取り除いた場合でも、.optionsとした場合と同じように動作します。何か2つの場合において、違いやメリット、デメリットなどがありましたら、教えてください。
お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

spookybird

2018/09/17 09:22

勘違いではないですか?同じように動作するはずはないのですが...
newyee

2018/09/17 09:31

自分が試した限りでは、optionsをつけた場合でもつけていない場合でも、同じように、セレクトボックスの中の選択した値がアラートとして表示されるんですよね
spookybird

2018/09/17 13:18

あっ、理解できました。回答します。
guest

回答2

0

ベストアンサー

NodeList.item()
HTMLSelectElement.item()

どっち使ってるかが違っても取得結果が同じなんですね。

まず、
var opts = document.getElementById(name).options;
これをやった場合、
optionが3つ入ったNodeListが取得できます。
ので、forの中でvar opt = opts.item(i);とやると、NodeList.item()の方が実行されます。
で、結果的にはNodeListに入ってるoptionが取れます。

次に、
var opts = document.getElementById(name);
これをやった場合、
select要素が取れます。
ので、forの中でvar opt = opts.item(i);とやると、HTMLSelectElement.item()の方が実行されます。
で、これも結果的にoptionが取れます。

.item()という同じ名前のメソッドを持っているおかげで、挙動が同じになっているようです。

投稿2018/09/17 13:21

spookybird

総合スコア1803

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

newyee

2018/09/18 04:14

ご回答ありがとうございます。 「.item()」というメソッドを、「NodeList」「HTMLSelectElement」こちらの2つがもっていたために、たまたま、同じ挙動となっていたわけなんですね。 理解できました!
guest

0

こんなふうにすると少しわかりやすいかもしれません

javascript

1<script> 2document.addEventListener('DOMContentLoaded', function() { 3 document.querySelector('#btn').addEventListener('click', function(e) { 4 const t=e.target; 5 const targetid=t.dataset['targetid']; 6 const results =[].map.call(document.querySelectorAll('#'+targetid+' option:checked'),function(x){ 7 return x.value; 8 }); 9 console.log(results); 10 }); 11}); 12</script> 13 14<form> 15 <div> 16 <label for="food">好きな食べ物は?:</label> 17 <select id="food" multiple> 18 <option value="ラーメン">ラーメン</option> 19 <option value="餃子">餃子</option> 20 <option value="焼き肉">焼き肉</option> 21 </select> 22 <input id="btn" type="button" data-targetid="food" value="送信" /> 23 </div> 24</form>

投稿2018/09/18 01:55

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

newyee

2018/09/18 04:15

ありがとうございます。 理解することができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問