ページを開いたときは、全てのselect部分ではデフォルトが表示されます。
選択後にブラウザを更新させずに、全てをデフォルトに戻すためには
どのようにしたらよいのでしょうか。
html側でselected="selected"とする方法がありますが、
ブラウザによって対応していなかったりしたので、他に確実な方法を知りたいです。
よろしくお願いします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>全てのselectをデフォルトにする</title>
</head>
<body>
<form>
<select name="s0" onclick="f(this.form)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<select name="s1" onclick="f(this.form)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="あ">あ</option>
<option value="い">い</option>
</select>
<select name="s2" onclick="f(this.form)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</form>
<script>
function f(fff){
var aaa = []
var fel;
var sl = document.getElementsByTagName('select').length;
for(i=0; i<sl; i++){
fel = fff.elements["s"+i];
//デフォルトかそうでないかをdefaultSelectedで判断
aaa[i] = fel.options[fel.selectedIndex].defaultSelected;
if( aaa[i] == false ){
//false(=デフォルトでない)場合はデフォルトに戻す
aaa[i] = true;
}
//戻り値をかえして全てをデフォルトにする
return aaa[i];
}
}
</script>
</body>
</html>
No.1
- 回答日時:
フォームをリセットしてしまえばよろしいかと思います。
a) FORM に resetボタンを追加する。(そのボタンを押したときにリセット)
<input type="reset" value="全部リセットしちゃうよ" />
あるいは、
b) javaScriptからresetメソッドを呼ぶ(呼ぶとリセット)
document.form.reset();
No.2ベストアンサー
- 回答日時:
まずデフォルトとはなにかという定義が必要
たんに各セレクトボックスの最初のoptionであれば
selectedIndexを0にするだけ。
<form>
<select name="s0" onclick="f(this)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<select name="s1" onclick="f(this)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="あ">あ</option>
<option value="い">い</option>
</select>
<select name="s2" onclick="f(this)">
<option value="デフォルト" selected="selected">デフォルト</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</form>
<script>
function f(obj){
var f=obj.form;
for(var i=0; i<f.length; i++){
if(f[i].type=="select-one" && f[i]!=obj) f[i].selectedIndex=0;
}
}
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
html selectの内容を初期値に戻す
JavaScript
-
プルダウン選択を変更すると、変更する前に戻るJavaScript
JavaScript
-
セレクトメニューで2つの項目や値を渡す方法はありますか?
HTML・CSS
-
-
4
javascriptでセレクトボックスのselected"を動的につ"
JavaScript
-
5
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
6
クリックされたセルの位置を取得するには?
JavaScript
-
7
一覧から選択した行の行番号を取得について
JavaScript
-
8
javascriptでの2つのプルダウンメニューの初期値
JavaScript
-
9
テーブルとテーブルの間隔について
HTML・CSS
-
10
プルダウンで選択すると、DBの値を取得したい
JavaScript
-
11
formで特定のinputを送信しないようにしたい
JavaScript
-
12
JavaScriptで<select>の<option>の値を評価して非表示したい
JavaScript
-
13
テキストボックスの入力をリセット
JavaScript
-
14
チェックボックスのON/OFFでValueの値を変える方法が分かりません。
JavaScript
-
15
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
16
getElementsByNameで要素が取得できない
JavaScript
-
17
ラジオボタンとプルダウンを連動させたい
JavaScript
-
18
リクエストに応じたselectedの初期値設定方法
Java
-
19
Javascript_submit()完了後に処理したい
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
selectを変更不可にしたい
-
プルダウン選択を変更すると、...
-
javascriptでセレクトボックス...
-
javascriptでoptionタグを削除...
-
スマホのフォームでのselect複...
-
SELECTタグで変更禁止にする方法
-
プルダウンメニューに連動する...
-
selectのすべての値を送信する方法
-
hiddenに値を設定する方法
-
全てのselect要素をデフォルト...
-
Selectボックスの一覧表示方法
-
プルダウンを選択していないと...
-
select要素のvalueを配列で取得...
-
webページの一部のみの更新につ...
-
「年」「月」二つのドロップダ...
-
javascriptで計算フォームを作...
-
変数にフォーム名を指定したい
-
同じ名前のセレクトがある場合...
-
selectボックスで選択数を制限...
-
jqueryでselect要素を表示・非...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
全てのselect要素をデフォルト...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
JavaScriptで<select>の<option...
-
プルダウン選択を変更すると、...
-
select要素のvalueを配列で取得...
-
selectを変更不可にしたい
-
<input>の選択肢をプルダウンメ...
-
ラジオボタンとプルダウンを連...
-
【JS】selectでchangeした時の...
-
VBScriptでHTMLのセレクトボッ...
-
リストボックス内の重複したも...
-
同じ名前のセレクトがある場合...
-
プルダウンの値によって活性・...
-
selectが変更されたらnameを指...
-
【javascript】連想配列からセ...
-
3つのselectでURLパラメータを...
-
複数のプルダウンを1つにまとめ...
-
selectボックスで選択数を制限...
-
セレクトボックスで配列を呼び...
おすすめ情報