<input type="reset"> の仕様について

質問

いつもお世話になっております。

HTMLのリセットボタンについて、質問させて下さい。

<input type="reset"> を使用した際の、プルダウンの動作なのですが、以下の動作をするのはHTMLの仕様(?)なのでしょうか？

---- 前提条件 ----
<画面初期表示>
○色プルダウン▼
ブランク【初期値】
赤
黄
緑
○くだものプルダウン▼
ブランク【初期値】

<画面表示時にonLoadで行う処理【配列生成】>
赤くだもの = new Array('りんご', 'いちご');
黄くだもの = new Array('バナナ', 'レモン');
緑くだもの = new Array('キウイ', 'メロン');

---- 質問内容 ----
(1)色プルダウン選択時に、JavaScriptを使用して、くだものプルダウンの内容を生成する。

例)「赤」を選択した場合、くだものプルダウンは
○くだものプルダウン▼
りんご【初期値】
いちご
と表示される。

(2)表示されたくだものプルダウンから、「いちご」を選択する。

(3)リセットボタンを押下する。

**********
(3)のオペレーション後の画面表示は、
○色プルダウン▼
ブランク
○くだものプルダウン▼
りんご
になります。

あたかもくだものプルダウンがリセットされていないかのように見えますが、これはHTMLリセットを使用している以上、仕方のないことでしょうか？

<input type="reset">でプルダウンのリセットを行う場合は、先頭の要素に戻される、という認識であっていますでしょうか？

ご教授お願い致します。
(参考URLを紹介して頂ければ、幸いです。)

宜しくお願い致します。

回答No.2

koutarou504 · ベストアンサー

まわりくどい言い方をすると、
その時点の HTML の状態で再描画
という事と考えるべきかと思います。

今回のポイントは JavaScript で HTML を書き換えている事でしょう。
reset される時のそこにある HTML(プルダウン) は JavaScript で書き換えられた物・・・。
そしてそこにも「初期値：りんご」とあります。
「いちご」が選択されていても、reset で「りんご」になる・・・。

尚、プルダウンの選択をしようがリセットをしようが、HTML は書き換わっていません。JavaScript で HTML の情報を拾って確認すると判ると思いますが。

で、対応は既出の様に reset でイベント処理で初期化処理を付加するか、思い切ってページごと再読込させるか・・・。
改めてプルダウンを書き換えるか書き直すか・・・。

意識の注意点。
今回は事前にJavaScript で HTML を書き換えています。
そしてプルダウンの選択も reset も HTML は書き換えていません。というか HTML の機能です。

お礼

koutarou504さん、ご回答ありがとうございました。

まとめてのお礼になってしまい、申し訳ありません。

今回質問させて頂いた内容は、実は私自身当たり前の動作であると認識していたのですが、「なぜそうなるのか？」ということを、いざ他人に説明しようと思った時に詰まってしまったという内容でした。

ということは、分かっていない、ということなのですよね…。

教えて頂いた内容で、納得することができました。
（ポイントを指摘して下さったので、分かり易かったです。）

ありがとうございました。

回答No.1

twinkleluz

resetボタンの動作は、「ページが読み込まれたときの初期状態に戻す」ということになると思います。
先頭ではなく、各オプションにselectedキーワードが付いていたら、selectedがついている要素に戻ります。

今回の場合、くだものプルダウンの初期値は「空」です。
よって、resetを押したとき、初期値が設定されていないので初期値に戻るという動作が行われない可能性があります
（ブラウザの実装に依るとおもうので、あくまで可能性とします）

くだものプルダウンには後付で動的に内容が生成されています。
これはresetボタンでは戻らないでしょう。
resetは選択された項目をリセットする機能で、後から動的に生成されたドキュメントを戻す機能ではないからです。
なのでresetを押したときにonClickを引っ掛け、プルダウンの中身を削除するようなjavascriptを書けば良いと思われます。

お礼

twinkleluzさん、ご回答ありがとうございました。

まとめてのお礼になってしまい、申し訳ありません。

今回質問させて頂いた内容は、実は私自身当たり前の動作であると認識していたのですが、「なぜそうなるのか？」ということを、いざ他人に説明しようと思った時に詰まってしまったという内容でした。

ということは、分かっていない、ということなのですよね…。

くだものプルダウンの内容を後から動的に生成していることがポイントなのだということが分かりました。

ありがとうございました。