【jQuery】<input type="reset">(リセットボタン)でリセットされる初期値を変更する
で紹介した方法がテキストボックス(<input type="text">
)にしか通用しないので、今回は各フォーム部品の初期値リセット方法を設定する方法をまとめます
コード・動作について
jQuery 1.11.2で動作確認
フォーム部品のセレクタ("input[name='xxx']"
, "#id"
など)はselector
としています。
各スクリプトは、汎用性を高めるために関数にしました。
今回は前述のリンク記事で使用した、現在の入力(選択)値をリセット初期値にする方法を紹介します。
任意の値にする際は各サンプルコード下の記述を参照してください。
リセット初期値
<input type="reset">
で表示されるリセットボタンを押すとフォームがリセットされます。
ただしこの場合の「リセット」とはHTMLを読み込んだ際にあらかじめ表示されている値(value=""
, checked
など)であり、その初期値がもう一度設定されます(全消去ではありません)。
この初期値を書き換えていきます。
テキストボックス(<input type="text">
)
function setTextboxValue(selector){
$(selector).attr("value", $(selector).val());
}
任意の値にするには
$(selector).val
を任意の文字列に変換するか、第二引数を設定してください。
テキストエリア(<textarea>
)
function setTextareaValue(selector){
$(selector).text($(selector).val());
}
任意の値にするには
$(selector).val
を任意の文字列に変換するか、第二引数を設定してください。
セレクトボックス(<select>
)
単一選択
function setSelectValue(selector){
var value = $(selector).val();
$(selector + ' option').removeAttr('selected');
$(selector + ' option[value="'+value+'"]').attr('selected','selected');
}
任意の値にするには
value
を任意の文字列に変換するか、第二引数を設定してください。
設定した値が選択肢に含まれているかの判定処理、エラー処理を追加することを推奨します。
複数選択(<select multiple="multiple">
)
function setSelectValues(selector){
var values = $(selector).val();
$(selector + ' option').removeAttr('selected');
$.each(values, function(){
$(selector + ' option[value="'+this+'"]').attr('selected','selected');
});
}
任意の値にするには
values
を任意の文字列の配列に変換するか、第二引数(配列)を設定してください。
設定した値が選択肢に含まれているかの判定処理、エラー処理を追加することを推奨します。
両方に対応させる
必要なら$.isArrayを使って条件分岐しながら一つの関数にするのも良さそうですね。
ラジオボタン(<input type="radio">
)
function setRadioValue(selector){
var value = $(selector+':checked').val();
$(selector).removeAttr('checked');
$(selector + '[value="'+value+'"]').attr('checked','checked');
}
任意の値にするには
value
を任意の文字列に変換するか、第二引数を設定してください。
設定した値が選択肢に含まれているかの判定処理、エラー処理を追加することを推奨します。
チェックボックス(<input type="checkbox">
)
function setCheckboxValues(selector){
var values = $(selector+':checked').map(function() {
return $(this).val();
}).get();
$(selector).removeAttr('checked');
$.each(values, function(){
$(selector + '[value="'+this+'"]').attr('checked','checked');
});
}
任意の値にするには
values
を任意の文字列の配列に変換するか、第二引数(配列)を設定してください。
設定した値が選択肢に含まれているかの判定処理、エラー処理を追加することを推奨します。