JavaScriptで配列の取得

tpl側に下記のformを作成して

<form method="post" name="print" action="/hoge/hogehoge/"> ホゲコード：<select name="hoge_id[]" multiple> <option value="b">b</option> <option value="b1">b1</option> <option value="b2">b2</option> <option value="r">r</option> <option value="r1">r1</option> </select><br> <input type="button" value="Excel出力" onclick="func_submit();"> </form>

共通のjsファイルに下記のメソッドを定義
function func_submit() {
alert(document.print.hoge_id[].value);
}

とりあえずjsで上手く取得できているかalertで確認したいのですが、hoge_id[]はjs側ではどのように書いたらよろしいでしょうか？

配列以外の他のリストの値等は取得できるのですが（alert(document.print.hoge.value);など）配列の書き方がわかりません。

初歩的な質問で申し訳ないのですが、どなたかご教示頂けませんでしょうか。

何卒、宜しくお願い致します。

think49

2015/12/01 04:28

https://teratail.com/help を参考に markdown で書いていただけるとコードが読みやすくなる為、助かります。蛇足ですが、form[name] は使用せず、form[id] を使用する事をお勧めします。

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

回答3件

func_submit() の名前から submit する事を期待しているようなので onsubmit で待つのが適切ではないかと思います。

option[value] を配列化 - JSFiddle

HTML
1<script>
2'use strict';
3function handleSubmit (event) {
4  var form = event.target || event.srcElement,
5      options = form.elements['hoge_id[]'].options,
6      values = [];
7
8  for (var i = 0, l = options.length, option; i < l; ++i) {
9    option = options[i];
10
11    if (option.selected) {
12      values.push(option.value);
13    }
14  }
15
16  console.log(values);
17
18  event.preventDefault ? event.preventDefault() : event.returnValue = false; // 検証用(本番では外して下さい)
19}
20</script>
21<body>
22<form method="post" name="print" action="/hoge/hogehoge/" onsubmit="handleSubmit(event);">
23  <select name="hoge_id[]" multiple>
24    <option value="b">b</option>
25    <option value="b1">b1</option>
26    <option value="b2">b2</option>
27    <option value="r">r</option>
28    <option value="r1">r1</option>
29  </select>
30  <input type="submit" value="Excel出力">
31</form>

Re: Takanori さん

投稿2015/12/01 04:03

think49

総合スコア18162

ベストアンサー

これでどうですか。

javascript
1alert(
2  Array.prototype.map.call(
3    document.print['hoge_id[]'].querySelectorAll(':checked'),
4    function(e){ return e.value }
5  )
6);

投稿2015/12/01 03:33

Lhankor_Mhy

総合スコア36080

think49

2015/12/01 04:25 編集

:checked は select[option] を走査しない為、document.print['hoge_id[]'].querySelectorAll(':checked') は空の NodeList を返します。 Lhankor_Mhy さんが期待するコードは次のようになると思います。 Array.prototype.filter.call(document.forms['print']['hoge_id[]'].options, function (option) { console.log(option); return option.selected; }).map(function (option) { return option.value; }); 残念ながら、:selected な擬似クラスは Selectors API Level 4 にも存在しません。

Lhankor_Mhy

2015/12/01 04:48

うーん、でも実際には動作するんですよね…… 「動作しても仕様に反するからダメだ」ということでしたら納得したいのですが、これはCSS3の仕様だと理解していましたが、違いましたでしょうか。 > For example, the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes as described in Section 17.2.1 of HTML4 https://drafts.csswg.org/selectors-3/#checked お教えをいただけますと幸いです。必要であれば質問を立てます。

think49

2015/12/01 05:31

すみません。仰る通り、確かに動作しますね。動作しない事の確認もしていたつもりでしたが、コード上で問題があったようです。失礼致しました。 http://jsfiddle.net/L3gfzats/1/ Selectors API Level 4 をもう一度、読み直してみたところ、HTML Living Standard へのリンクがあり、selected option elements も対象に含まれていましたので仕様的にも問題なさそうです。お騒がせしました。m(_ _)m https://html.spec.whatwg.org/multipage/scripting.html#selector-checked

Lhankor_Mhy

2015/12/01 06:18

いえ、ご指摘ありがとうございます。ご提示いただいたURLがとても参考になります。ブックマークさせていただきました。