SQLの窓

2014年02月11日


jQuery の .val() と .val('値') と一括変更用の .val(関数)

.val() はとても解りやすい便利なメソッドです。ちなにみに alert( $('#a1').val ) とすると .val メソッドのソースの内容が表示されます。

.val('値') もその逆ですから普通に使えてしまいますが、.val( 関数 ) はちょっと解りづらいです。関数が返した値で、オブジェクトの値を書き換えるのですが、その関数内では対象となったオブジェクトのインデックスと値が順次渡される仕様となっています。jQuery のドキュメントでは、無名関数で書かれていますが、以下のサンプルでは checkVal 関数として独立して定義して使用しています。関数内ではその時対象となるオブジェクトも参照できるので、使い方としては対象となるオブジェクトの値をキー(id)に対して明細を全て表示するような処理で使えます。( 明細は、XMLHttpRequest 等で取得 )
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<input class="action1" type="text" id="a1" value="lightbox" />
<input class="action1" type="text" id="a2" value="lightbox" />
<script type="text/javascript">

// val の引数として与える関数のサンプル
// もちろん無名関数でも良い
function checkVal( index, value ) {
	console.log(this.id);
	alert( index + "|" + value + " : これは入力フィールドのインデックスと現在の値です" );
	return( '変更' );
}

function action1() {

	// 現在の値の取得
	var x = $('#a1').val();

	// 表示
	alert("この値は、id=a1 の入力フィールドの現在の値です => "+x);

	// 現在の値を変更
	$('#a1').val('123');

	// 内容を変更する関数を呼び出す
	// input を両方変更するように、
	// index が変化しながら全て呼び出される
	$('input.action1').val(checkVal);

}

</script>
<input type="button" value="実行" onclick='action1();'>


もう少し具体的なサンプル

jQuery の .val(関数) を使用した、社員コードに対する明細データの表示サンプル


【メソッド:jQueryの最新記事】
posted by lightbox at 2014-02-11 05:30 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり