ページを開いたときは、全ての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.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>
No.1
- 回答日時:
フォームをリセットしてしまえばよろしいかと思います。
a) FORM に resetボタンを追加する。(そのボタンを押したときにリセット)
<input type="reset" value="全部リセットしちゃうよ" />
あるいは、
b) javaScriptからresetメソッドを呼ぶ(呼ぶとリセット)
document.form.reset();
お探しの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での2つのプルダウンメニューの初期値
JavaScript
-
8
一覧から選択した行の行番号を取得について
JavaScript
-
9
テーブルとテーブルの間隔について
HTML・CSS
-
10
プルダウンで選択すると、DBの値を取得したい
JavaScript
-
11
JavaScriptで<select>の<option>の値を評価して非表示したい
JavaScript
-
12
テキストボックスの入力をリセット
JavaScript
-
13
getElementsByNameで要素が取得できない
JavaScript
-
14
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
15
ラジオボタンとプルダウンを連動させたい
JavaScript
-
16
formで特定のinputを送信しないようにしたい
JavaScript
-
17
リクエストに応じたselectedの初期値設定方法
Java
-
18
Javascript_submit()完了後に処理したい
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
全てのselect要素をデフォルト...
-
javascriptでセレクトボックス...
-
リストボックス内の重複したも...
-
プルダウンメニューに連動する...
-
セレクトボタンで特定の項目で...
-
<input>の選択肢をプルダウンメ...
-
ラジオボタンとプルダウンを連...
-
セレクトボックスの組み合わせ...
-
select+submit部分をonclikでsu...
-
セレクトボックスで配列を呼び...
-
2段階プルダウンで1段階目の選...
-
WebBrowserを使ってプルダウン...
-
動的なセレクトボックスの生成...
-
javascriptで選択肢が分かれる...
-
今日の日付を自動的にセレクト...
-
同一ページに複数のプルダウン...
-
jqueryでselect要素を表示・非...
-
プルダウン選択を変更すると、...
-
2段階連動セレクトボックスでの...
-
複数のプルダウンを1つにまとめ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
全てのselect要素をデフォルト...
-
【JS】selectでchangeした時の...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
複数のプルダウンを1つにまとめ...
-
コードレビューをお願いします。
-
JavaScriptで<select>の<option...
-
<input>の選択肢をプルダウンメ...
-
select要素のvalueを配列で取得...
-
selectを変更不可にしたい
-
VBScriptでHTMLのセレクトボッ...
-
ラジオボタンとプルダウンを連...
-
javascriptで合計金額を算出し...
-
中百舌鳥駅と深井駅を入れ替え...
-
同じ名前のセレクトがある場合...
-
セレクトボックスで配列を呼び...
-
今日の日付を自動的にセレクト...
-
プルダウンの値によって活性・...
-
サイト内の物件を複数の検索条...
おすすめ情報