
いつもお世話になっております。
HTMLのリセットボタンについて、質問させて下さい。
<input type="reset"> を使用した際の、プルダウンの動作なのですが、以下の動作をするのはHTMLの仕様(?)なのでしょうか?
---- 前提条件 ----
<画面初期表示>
○色プルダウン▼
ブランク【初期値】
赤
黄
緑
○くだものプルダウン▼
ブランク【初期値】
<画面表示時にonLoadで行う処理【配列生成】>
赤くだもの = new Array('りんご', 'いちご');
黄くだもの = new Array('バナナ', 'レモン');
緑くだもの = new Array('キウイ', 'メロン');
---- 質問内容 ----
(1)色プルダウン選択時に、JavaScriptを使用して、くだものプルダウンの内容を生成する。
例)「赤」を選択した場合、くだものプルダウンは
○くだものプルダウン▼
りんご【初期値】
いちご
と表示される。
(2)表示されたくだものプルダウンから、「いちご」を選択する。
(3)リセットボタンを押下する。
**********
(3)のオペレーション後の画面表示は、
○色プルダウン▼
ブランク
○くだものプルダウン▼
りんご
になります。
あたかもくだものプルダウンがリセットされていないかのように見えますが、これはHTMLリセットを使用している以上、仕方のないことでしょうか?
<input type="reset">でプルダウンのリセットを行う場合は、先頭の要素に戻される、という認識であっていますでしょうか?
ご教授お願い致します。
(参考URLを紹介して頂ければ、幸いです。)
宜しくお願い致します。
No.2ベストアンサー
- 回答日時:
まわりくどい言い方をすると、
その時点の HTML の状態で再描画
という事と考えるべきかと思います。
今回のポイントは JavaScript で HTML を書き換えている事でしょう。
reset される時のそこにある HTML(プルダウン) は JavaScript で書き換えられた物・・・。
そしてそこにも「初期値:りんご」とあります。
「いちご」が選択されていても、reset で「りんご」になる・・・。
尚、プルダウンの選択をしようがリセットをしようが、HTML は書き換わっていません。JavaScript で HTML の情報を拾って確認すると判ると思いますが。
で、対応は既出の様に reset でイベント処理で初期化処理を付加するか、思い切ってページごと再読込させるか・・・。
改めてプルダウンを書き換えるか書き直すか・・・。
意識の注意点。
今回は事前にJavaScript で HTML を書き換えています。
そしてプルダウンの選択も reset も HTML は書き換えていません。というか HTML の機能です。
koutarou504さん、ご回答ありがとうございました。
まとめてのお礼になってしまい、申し訳ありません。
今回質問させて頂いた内容は、実は私自身当たり前の動作であると認識していたのですが、「なぜそうなるのか?」ということを、いざ他人に説明しようと思った時に詰まってしまったという内容でした。
ということは、分かっていない、ということなのですよね…。
教えて頂いた内容で、納得することができました。
(ポイントを指摘して下さったので、分かり易かったです。)
ありがとうございました。
No.1
- 回答日時:
resetボタンの動作は、「ページが読み込まれたときの初期状態に戻す」ということになると思います。
先頭ではなく、各オプションにselectedキーワードが付いていたら、selectedがついている要素に戻ります。
今回の場合、くだものプルダウンの初期値は「空」です。
よって、resetを押したとき、初期値が設定されていないので初期値に戻るという動作が行われない可能性があります
(ブラウザの実装に依るとおもうので、あくまで可能性とします)
くだものプルダウンには後付で動的に内容が生成されています。
これはresetボタンでは戻らないでしょう。
resetは選択された項目をリセットする機能で、後から動的に生成されたドキュメントを戻す機能ではないからです。
なのでresetを押したときにonClickを引っ掛け、プルダウンの中身を削除するようなjavascriptを書けば良いと思われます。
twinkleluzさん、ご回答ありがとうございました。
まとめてのお礼になってしまい、申し訳ありません。
今回質問させて頂いた内容は、実は私自身当たり前の動作であると認識していたのですが、「なぜそうなるのか?」ということを、いざ他人に説明しようと思った時に詰まってしまったという内容でした。
ということは、分かっていない、ということなのですよね…。
くだものプルダウンの内容を後から動的に生成していることがポイントなのだということが分かりました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) Excelで質問です。 詳細(写真) ①黄色の部分を全てプルダウンを設定する。 ②リストはG列 ③リ 1 2023/06/16 21:54
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 1 2022/04/01 12:11
- Excel(エクセル) エクセルの数式で教えてください。 1 2022/10/25 09:26
- Excel(エクセル) ユーザー定義について質問です。 2 2023/06/28 13:21
- Excel(エクセル) Excelのプルダウンメニューの内容を人によって可変する方法 2 2023/03/28 14:52
- Excel(エクセル) VLOOKUP が機能しない、その原因は何 ? 8 2022/10/19 12:06
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 2 2022/06/10 11:06
- Excel(エクセル) エクセルの数式について教えてください。 1 2023/02/11 15:17
- Excel(エクセル) エクセルの書式設定について教えてください。 2 2023/02/03 09:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンが両方とも選択で...
-
「value」に2つの値をセットす...
-
リストボックス(multipleなsel...
-
select値をhiddenのvalueに渡し...
-
チェックボックスとセレクトボ...
-
INPUT TYPE
-
SUN BBSの改造方法
-
wordの数式について 定積分を書...
-
掲示板(kentさんの所のsunbbs...
-
onMouseoverで下線表示したい(...
-
CGIでhtmlを作成するもブラウザ...
-
WEBページを強制的に横画面で見...
-
ボタンの処理
-
Rubyのmechanizeを利用したファ...
-
EXCELとの連携
-
フォーム入力後の確認画面表示...
-
チェックボックスでのor検索
-
CGIを使ったメールフォーム
-
CGIページの最終更新日時
-
sendmail 送信先を複数設定す...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ラジオボタンが両方とも選択で...
-
「value」に2つの値をセットす...
-
select値をhiddenのvalueに渡し...
-
FORMのselectの選択肢を最初か...
-
チェックボックスとセレクトボ...
-
リストボックス(multipleなsel...
-
OPTIONタグにループは使えない...
-
selectboxの画面遷移で、postデ...
-
INPUT TYPE
-
ラジオボタンを選択済みにする...
-
Select Case について教えてく...
-
チェックボックスの余白を指定...
-
プルダウンからテキストボックスへ
-
<select>タグの幅設定
-
ラジオボタンについて
-
PHPで検索ボタンを押さずに検索...
-
htmlでセルの値を取得して計算...
-
""でも表示されない方法ないですか
-
FORMのINPUTタグについて
-
プルダウンを50個程度使ったペ...
おすすめ情報