ここでは、jQuery を用いてセレクトタグの選択値を設定・変更するサンプルと、現在選択されている値(行)を取得するサンプルを掲載しています。詳細は、サンプル内のコメントを参照ください。
スポンサーリンク
HTMLファイルのサンプル
ここでは、次の HTML ファイルを使用して SELECT タグを操作することとします。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- jQuery ライブラリの読み込み -->
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<!-- 今回のサンプルコード -->
<script type="text/javascript" src="test.js"></script>
<title>jQueryテスト - selectタグを操作する</title>
</head>
<body>
<!-- サンプルで使用するセレクトボックス -->
<select id="sid" name="sname">
<option value="val1">バリュー１</option>
<option value="val2">バリュー２</option>
<option value="val3">バリュー３</option>
</select>
</body>
</html>
SELECT タグの値を設定・取得する
SELECT タグの値の設定・取得を行う Javascript ファイル ( test.js ) のサンプルです。サンプル内のコメントも参照ください。
/*
* 以下のように記述することで、DOMの読み込み完了時に、以下の関数内の処理が実行される
* なお、$(function(){}); は、$(document).ready(function(){}); を
* 省略した記述方法である
*/
$(function () {
/*
* 初期処理
* selectボックスに値を設定する(バリュー３)
*/
$("select[id=sid]").val("val3");
/*
* selectボックスの値が変更されたときのイベントハンドラを登録する
*/
$("select[id=sid]").change(function(){
// 変更された行の値を出力
alert("value = " + $("select[id=sid]").val());
// 変更された行のテキストを出力
alert("text = " + $("select[id=sid] :selected").text())
});
});
/*
* 上記のサンプルでは、対象のselectボックスをタグ名とidで指定したが、
* 別の指定方法を参考までに示す。
*
* （１）ID属性を指定した別の記述方法
* $("select#sid")
*
* （２）name属性で指定する場合
* $("select[name=sname]")
*/